Things I’ve learned about CSS grid layout

Jennifer Wjertzoch
Feb 19, 2019 · 8 min read
Photo by Julie Tupas on Unsplash

With CSS Grid you can create complex web designs. It is very intuitive and very well supported by the major browsers. In this article I will show how to build layouts in CSS Grids.

Setting Up CSS Grid

It is very simple to get CSS Grid up and running. First of all I would recommend to download Firefox’s Developer Edition. Firefox has some great Dev Tools included, which makes it very easy to examine the CSS grid.

Here is the markup for a container (parent) with six items (children) in it:


To turn our container div into a grid, we give it a display of grid:


But, this doesn’t do anything yet, as we haven’t defined how we want our grid to look like. It’ll position six divs on top of each other.

Basic CSS Grid

Defining Columns and Rows

To make it two-dimensional, we’ll need to define the columns and rows. Let’s create three columns and two rows. We’ll use the grid-template-row and grid-template-column properties.


Basic CSS Grid with Columns and Rows

Adding Grid-Gap Between Items

To set a gap between rows and columns you can use grid-column-gap and grid-row-gap or grid-gap. The good thing is, that the gaps are only created between the items and not to the outside of the grid.

Let’s add grid-gap to our example CSS:

CSS Grid with 20px of Grid-Gap

I am using the grid-gap property to create a gap of 20px between my columns and rows. This property is a shorthand for grid-column-gap and grid-row-gap.

Explicit And Implicit Grid

Grid lines are dividing the grid on the horizontal and vertical axis. They start with number one. If you open the Grid Inspector Tools on Firefox, this becomes much clearer.


CSS Grid with Numbered Column Lines and Row Lines
Firefox Developer Edition Inspector Tools


The explicit part uses the grid-template-columns and grid-template-rows properties. Here you specify how many columns and rows the container has and how wide they should be.

Explicit Grid with Closing Line at Bottom

Check the continuous line “closing” the grid at the bottom, after the second row. This line encloses the explicit grid.

You can also use a shorthand to define rows and columns. The row track-listing coming before a forward slash, columns afterwards.


The properties grid-auto-columns and grid-auto-rows define the implicit grid.

Let’s give the rows a height of 50px and see what happens:

CSS Grid with Implicit Grid

Now all added lines will be 50px high.

The grid can only grow in one direction, so it adds either rows or columns. As a result, only one of the above properties is effective. The grid-auto-flow property specifies the direction of the implicit grid.

The Repeat() Function

To avoid a lot of typing with columns that are all the same width, we will use the repeat() function. The 1st value in repeat() stands for the number of repetitions. Then the desired grid properties follow.

Here’s an example for the repeat() function:


Since we didn’t change anything, the grid should still look exactly the same.

Fractional Units

The fr unit works as one fraction of the available space. You can calculate flexible layouts without percentages, pixels or em.

Let’s see how we can use this new flexible value in our code:


For three columns with an equal width, we can use fractional units now, instead of setting a width:calc(100%/3) on the item.

This way, you can add as many child elements as possible, while the widths stays the same on all child elements.

CSS Grid using Fractional Units

Since I didn’t set a fixed width, the elements now take up as much space as possible.

You can also combine the fr unit with any other CSS units of course. For instance, in the example below, I used the 60% 1fr 2fr ratio for my grid.


CSS Grid with the Ratio of 60% 1fr 2fr

Sizing Individual Grid Items

Let’s see how to determine the width of an item inside the grid container with the span keyword. I am going to span item #5 across three column tracks. All the items from item #6 onwards have skipped one spot to the next available cell.


.item5 {
grid-column: 1 / span 3;
background: #CAC4CE;
CSS Grid Spanning Item Five across Three Columns

The Grid-Auto-Flow Property

If you change grid elements, gaps may occur in the grid, as you can see in the previous example.

With the grid-auto-flow property you can control the auto-placement algorithm. Items that run outside the defined grid tracks, will show in generated rows. That is, unless we set grid-auto-flow to column.

The dense keyword will place smaller items in the gaps and fill the grid as good as possible. I have added another item#7.


CSS Grid with Grid-Auto-Flow: Dense

The Span Keyword

You can also tell the grid item1 from our previous example how wide you want it to span and where you want it to end. You can use the span keyword to avoid specifying end lines when items should span more than one column or row.



CSS Grid with Grid-Column Shorthand Property

If you want your item to span the entire width of the grid, but don’t know how wide your grid is, you can set grid-column:1/-1 .

Positioning Items in the Grid

With CSS grids you can position the elements in the grid as you like. You can move the child elements with four CSS properties: grid-row-start, grid-row-start, grid-column-start or grid-column-end. Remember, the positioning is not done by grid columns, but by column lines.


CSS Grid using Grid-Column-Start and Grid-Column-End

And there is a simpler way of writing the syntax above:


The Minmax() Function

If you set a fixed size for the items, a smaller viewport pushes the content together too much.

The minmax() property makes it possible to adapt the grid to the respective viewport of each user.

Feel free to check out the behavior of minmax() on different devices:


Auto-Fill vs. Auto-Fit

When to use auto-fill and when auto-fit can be a bit confusing, but it makes a lot more sense when you visualize it.

Auto-fill — fills the row with as many columns as it can fit.


CSS Grid using Auto-Fill Keyword for Repeat

Auto-fit— Columns take up any available space.

CSS Grid using Auto-Fit Keyword for Repeat

Six Properties for Justification and Alignment

With justify-items you can justify the grid items along the row axis. With align-items you can align the grid items along the column axis.



CSS Grid with Justify-Content and Start
CSS Grid with Justify-Content and Center
CSS Grid with Justify-Content and Space-Around
CSS Grid with Justify-Content and Space-Between


Give the container a fixed height of 500px and the items will stretch over the whole height.


CSS Grid with a Fixed Height of 500px
CSS Grid with Align-Content Space-Around
background: #D7CDCC;
width: 50px;
justify-self: center;
align-self: center;
CSS Grid with *** — Self on the Item Itself

Here is the short version for justify-*** and align-**:

Further Reading

I hope that my article has been helpful for learning some basics about CSS Grid Layout. I am sure that sharing is still the best way of learning and remembering things.

We’ve moved to

We’ve moved to and publish tons of tutorials each week. See you there.

Jennifer Wjertzoch

Written by

Frontend Developer in love with CSS and JavaScript | Accessibility and Web Performance are not features

We’ve moved to

We’ve moved to and publish tons of tutorials each week. See you there.

Jennifer Wjertzoch

Written by

Frontend Developer in love with CSS and JavaScript | Accessibility and Web Performance are not features

We’ve moved to

We’ve moved to and publish tons of tutorials each week. See you there.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store