I was wondering how does the Css grid layouts.
I am trying to figure out a grid layout which make all input in a row and fit the grid column.
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
grid-gap: 4px;
}<div class="grid">
<div class="one">
<label for="aaa">aaa</label>
<input type="text" name="cheese" />
</div>
<div class="two">
<label for="bbb">bbb</label>
<input type="text" name="cheese" />
<span>~</span>
<input type="text" name="cheese" />
</div>
<div class="three">
<label for="ccc">ccc</label>
<input type="text" name="cheese" />
</div>
</div>Here’s result.