Looking back, the recent Bootstrap vs Bulma post left me wondering why you really need either. Two years ago, I did a post on what CSS Grid is and I figured that you can consider this to be an continuation of that.
Let’s start with something simple.
In the above pen, there is a form consisting of an assortment of inputs, buttons, textareas, and select boxes. Each thing has a label. We arranged the form so that there is 200px for the left column and 1fr for the right column. The grid gap (gutter between form items) is 16px.
For the next step, we will move the Zip, City, and State lines onto one common line.
In order to accommodate the new style, we need to go from two columns to seven columns. For the majority of the form, the label is in the first column and the input is spanning across the remaining columns. The additional columns allow us to add labels into columns two, four, and six and to add inputs into columns three, five, and seven.
That’s not the most readable way to structure a webform so for the next example, let’s move the labels above the inputs.
For this example, we only need three columns (since the labels and their corresponding inputs are in the same cells) but we do need to define a grid row for the Zip, City, and State inputs. Without the grid-row definitions, that line would be slanty since the browser would assume that each cell is one row down from the previous one.
For our final example, we are going to see how to make the Zip and State inputs narrower than the City input.
We kind of went over this in the first and second examples but varying the values in the grid-template-columns definition is the trick. Beyond that, there aren’t any differences between the third and forth examples.
Have any questions, comments, etc? Feel free to drop a comment, below.