Recently on Twitter Rachel Smith put up this challenge for CodePeners...

screenshot of tweet

I've never written a post before, but after just finishing a pen I was super excited about, this sounded not so scary.

So! This is me, now attempting to explain a tiny bit of code that I used in my pen.

While working on my Responsive Kodak Film Wallet I hit a snag when it came to building the form. I wanted the form to look just like it did in the original film wallet.

form image

The challenge for me was getting the input field to start right after the label ended and then have all the input fields end at the same spot. At first, I didn't wrap each label and input couple in a div. But after trial and error I realized I needed to do just that to get the desired effect. And then this was where the magic of CSS Grid truly helped me.

Here's a shortened version of my form...

  <form>
  <div>
    <label for="name">Name</label>
    <input type="text" name="name">
  </div>
  <div>
    <label for="order-no">Order No</label>
    <input type="text" name="order-no">
  </div>
</form  

By wrapping the label and input in a div I was then able to make each div a grid.

  form div {
  display: grid;
}

Next I needed two columns, one for the labels and one for the inputs. And, since the labels are all different sizes, I needed the columns to be flexible. The code that gave me the results I was looking for was the following...

  form div {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
}

Firstly, what is a grid column? I think the MDN docs explains this nicely, "A grid column is a vertical track in a CSS Grid Layout, and is the space between two vertical grid lines." One way to define the columns is by using the grid-template-columns property. As MDN states, "The grid-template-columns CSS property defines the line names and track sizing functions of the grid columns." Using this property we can set values to it that will allow us to control the size of our columns.

I want 2 columns, so I'm setting 2 values.

  form div {
  grid-template-columns: auto 1fr;
}

The first column's size I've set to auto, and the second to 1fr.

The fr unit is a fractional unit. It takes up a fraction of the available space. 1fr takes up 1 part of the available space.

The CSS specs describes auto this way:

screenshot of auto definition

Initially I started to go down a rabbit hole here, attempting to break down each part of that definition, but it got a little too long. But basically from what I gather, a column set to auto will determine it's size automatically(either as maximum or minimum) depending on it's content and context.

Once I had my two columns set I didn't have to specify which columns the label or input should go into thanks to grid's auto-placement algorithm. The labels fall into the first column that is set to auto, and now that column is the size of the label. And the inputs fall into the second column set to 1fr, which takes up the rest of the available space.

Lastly, I used align-items: center; to align the label and input within the center of the column. This lined up the items so that the input's bottom border was on the same level as the bottom of the label's name.

And now finally my form looked like the original form!!!

screenshot of completed form

Needless to say I'm pretty excited about the results. And maybe this could have been achieved a different or better way...but for now I'm just happy I found a solution that worked for me. A solution that makes even more sense to me now that I wrote this post.


2,212 2 17