How You Can Get Started with CSS Grid

More like my slow journey with CSS Grid, but these things always sound cooler as a guide.

As I finish my 10th CSS Grid pen* (my 10th pen-niversary, if you will), I figure I might as well pen (ha!) some thoughts down.

Maybe the notes can help someone else along the way?

* I procrastinated so much finishing this, I released 3 more CSS Grid pens in the meantime 🤦‍♀️

Getting Started

I get intimidated easily to take the first step to try something out, especially if it's something really big. I think this happens to junior developers quite a bit (cough not that I am a developer cough).

CSS Grid got so much hype (as it deserves); I keep hearing about how awesome it's going to be that it ended up painting a certain, scary impression for me. I thought that it would be really complicated to implement, and just assumed that my lack of experience in coding will inhibit me from understanding or utilizing the concepts correctly.

So when CSS Grid was rolled out, it wasn't even on my radar to actually try it.

Until one day, I had an idea that I was very excited to try. I knew that the only way I could force myself to do something is just to dive in and figure it out along the way.

Something like throwing your kid into the pool to force them to learn swimming. Don't do this - it's scary and may traumatize your kid - but I suppose it is an acceptable metaphor for fun coding projects.

So armed with a CSS Grid guide, my journey began!

1. OK, Getting Started, For Real

The 3 properties are pretty much...

display: grid
grid-template-columns: 300px 200px;
grid-template-rows: repeat(4, 1fr);

Bonus grid-gap property for the gaps.

grid-gap: 10px;

If you lay down the grid track with these declarations, all the immediate child elements will just flow accordingly, in order.

A simple example is this bingo card here...

See the Pen by Olivia Ng (@oliviale) on CodePen.

... with this grid track:

display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: 100px repeat(5,80px);

Honestly, that's really it. As long as you put your child elements in the right order, you don't need any more grid-related CSS.

This is my very first CSS Grid experiment, which is slightly more complicated than the example above but still very simple:

See the Pen by Olivia Ng (@oliviale) on CodePen.

... which uses this grid track:

display: grid;
grid-template-columns: repeat(9, 100px);
grid-template-rows: repeat(4, 100px);
grid-gap: 10px;

Additional useful information:

1. repeat(x, y) is just an easier way to write the code. So, grid-template-rows: 200px 200px 200px auto; can be written as grid-template-rows: repeat(3, 200px) auto;.

2. fr is the newest unit on the block. 1fr is one part of the available space. So if the width of the div is 500px, repeat(5, 1fr) means that 500px will be divided into 5 equal parts of 100px.

3. The values of grid-template-rows and grid-template-columns are pretty much limitless*. You can put grid-template-rows: 200px 100px 200px 100px 300px 250px 150px; and keep going 🤔

* Not actually tested, but I did try this:

2. Properties for the Child Elements

Next up is properties for the child elements.

Two important things you can control is setting a) the position and b) size of the elements.

See the Pen by Olivia Ng (@oliviale) on CodePen.

To get the long column where the lava lamp resides, the properties are:

grid-row-start: 2;
grid-row-end: 3;

... for the child element.

Which means that you want the element to take up rows 2 to 3. This can also be rewritten as grid-row: 2 / span 2 where the first part is the row where the element begins, and the second part is the number of cells you'd want the element to span across.

Works exactly the same for columns!

3. Discovering Other Cool Things Along the Way

Using grid-auto-flow: dense, which forces child elements to fill in gaps if they can fit.

A quick demo here (keep clicking the black button):

See the Pen by Olivia Ng (@oliviale) on CodePen.

This is my favorite property! You don't have to painstakingly specify the placement for each child element; very handy for portfolio items or photo galleries.

Overlapping child elements

I found out this feature very late in the journey 🙈, which then inspired my 10th pen. You can overlap elements and specify the order with z-index.

See the Pen by Olivia Ng (@oliviale) on CodePen.

Overlapped the calendar events using z-index here.

Moarrr complicated grid tracks with grid-templates-areas

You can specify the grid track using names instead!

For example, this pen here:

See the Pen by Olivia Ng (@oliviale) on CodePen.

The parent element has this property:

.parent-element {
   grid-template-columns: 60px 700px 300px;
   grid-template-rows: auto 70px;
   grid-template-areas: 
	  "title pie-recipe pie-image" 
      "context context pie-image";
}

Repeating the name means the child element will span across the cells.

In this example, element named context will take up two column cells and have a width of (60px + 700px). The element named pie-image will take up two row cells and have a height of (300px + 70px).

You 'name' the child elements by using the grid-area property:

.child-element-for-pie-image {
   grid-area: pie-image;
}

Sounds complicated? This very comprehensive guide will help clarify things and they explain things a lot better than I do.

A tip for complicated grid tracks:

To get layouts done quicker, I always put a plain-colored background in each child element and play around until I get the layout right.

This is almost always the start of complicated grid tracks for me.

See the Pen by Olivia Ng (@oliviale) on CodePen.

After

Special Mention

Special mention to not attempt something like this. 😂

See the Pen by Olivia Ng (@oliviale) on CodePen.

This was so much work 😭 The greatest thing about CSS Grid is flexibility and I absolutely love using values like minmax or auto for layouts.

But to use this approach for what I consider an illustration... let's just say I spend more than 2 hours trying to get things to align properly and to get each pixel right exactly where I want it to be.

Lesson learned: Think twice before using CSS Grid for illustrations.

Ok to be fair, I didn't really plan things properly. So I guess the advice here is plan first before executing.

How You Can Get Started Too!

Find inspiration from all around you and code it out! A lot of things can actually be transformed into a CSS Grid experiment.

See the Pen by Olivia Ng (@oliviale) on CodePen.

Inspired by bathrooms

See the Pen by Olivia Ng (@oliviale) on CodePen.

I look at spreadsheets for my job every day

But instead of me just saying, here's a list of things you can try:

1. Easy: Chess board, comic book layout
2. Medium: Restaurant menus, food nutrition label, tshirt labels, magazine layouts, a parking lot 😂
3. Hard: Receipts, newspapers, dashboards, keyboards (both the instrument and the one you type on)

Don't be too alarmed about the items in the Hard list; they are not necessarily hard, they just have more components that require you to think or plan a little more when laying down the grid track.

I love doing unconventional use cases for experimentation purposes and seeing these ideas come to life... so yeah, I'm pretty much outsourcing my ideas because I don't have time to do them all.

Please try them 😂 and share your pens with me on Twitter!