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.
See the Pen
CSS Grid Form – Part 1 by Joe Steinbring (@steinbring)
on CodePen.
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.
See the Pen
CSS Grid Form – Part 2 by Joe Steinbring (@steinbring)
on CodePen.
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.
See the Pen
CSS Grid Form – Part 3 by Joe Steinbring (@steinbring)
on CodePen.
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.
See the Pen
CSS Grid Form – Part 4 by Joe Steinbring (@steinbring)
on CodePen.
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.