What is CSS Grid and How Does it Work?

Michael Tong
Nov 5, 2020 · 5 min read
What is CSS Grid and How Does it Work?
What is CSS Grid and How Does it Work?
Photo by Michael Dziedzic on Unsplash

Have you ever went onto a beautiful website and wondered why certain tables are aligned the way, or at least, be able to adjust as the user stretches or minimize the screen?

In CSS, there are generally a few ways to do it:

  • flex-box
  • CSS grid
  • media query

All these properties allow HTML elements to be ordered in a different horizontal/vertical format as well as adjusting its width/height according to the screen size.

Interesting right? Today we will go through CSS grid, which combines the benefits of what flex-box and media query offers.

What is CSS grid?

CSS grid is a layout method designed to allow two-dimensional nodes to be sorted in a customized manner, vertically and/or horizontally.

Let’s say we have 6 items, with 2 rows and 3 columns:

Image for post
Image for post

Looks neat, doesn’t it? Now let’s take a look at the HTML and CSS that generates this:

Here is the CSS file:

Over here, we have 6 elements and if we want to use CSS grid, we set display: grid. We set this property on the parent div that contains the list of grid elements.

Inside there, we also set our grid-template-columns property. Grid template column allows us to define with a given number of items, how many items are we displaying per row, and their width.

For example, I set grid-template-columns to be 100px 100px 100px. This means I want three items with the width of 100px.

Furthermore, I also set grid-template-rows: 100px 90px. This statement assumes there are two rows, with the first one being set to a height value of 100px, the second row being set to a value of 90. Note that this sets the size but not the number of elements that show up on each row.

Image for post
Image for post
Photo by Karen Vardazaryan on Unsplash

I guess it’s fine if we are setting a few items in each row. What if we want to set up 20 rows? Based on what we covered so far, we will have to write grid-template-columns: 100px 100px 100px 100px 100px 100px 100px… and so on until there are 20 100px.

Ouch! Imagine how long the statement would look like in the CSS file? It would be horrible to read and for sure I won’t want to write that.

What should we do if we still want to render 20 rows?

Luckily, we have a repeat property in CSS to represent a repeating fragment of a CSS rule, written in the following pattern:

What if we want the rows in the middle of the rows the same width, but we want the row in the first one and the last one to look different? Instead of calling grid-template-columns: repeat(4,100px) we can call grid-template-columns: 50px repeat(2, 100px) 200px. This is how it will look like after the change:

Image for post
Image for post

What if we don’t want to set a fixed size to each element in the row but have them adjust their size to the screen?

Here’s an example:

With 1fr 2fr 3fr, we set rows to take 1 fraction unit of the page, 2 fraction unit as well as 3 fraction unit of the page.

Okay…what does that mean? It means given a screen size, the first item will take 1 fraction of the screen size, the second one taking 2 fractions of the remaining space, and so on.

To understand how that looks like, take a look at the following screenshot:

Image for post
Image for post

CSS grid also supports how items can be displayed differently, via the justify-content property:

Here is how it will look like:

Image for post
Image for post

Here is one more interesting question: what if we want to customize how many rows/columns an item will take within a grid? What if we want an item to span or take a customized amount of space before displaying everything in a grid order?

Let’s take a look at the following CSS:

and the following HTML to demonstrate the grid line principle:

Above after we have set up the grid properties layout for the wrapper div, we have 3 rows and 3 columns base on .wrapper css setting.

Now we have a new CSS property that points to div class=”number one”, with the .number.one CSS rule.

Image for post
Image for post

Over here, we have grid-column-start that begins at column 1 and ends at 3. (grid-column-start: 1; grid-column-end: 3;) We also got grid-row start that begins at row 1 and ends at 3.

As a result, the first number element will take over the spot for the first column and second column, as well as the first row and second row. Afterward, the rest of the items will display in a grid format, using the remainder of the spaces left.

There are more to CSS grid but this article will cover most of the basics you will need to know to use CSS grid.

Weekly Webtips

Explore the world of web technologies through a series of tutorials

Sign up for 💌 Weekly Newsletter

By Weekly Webtips

Get the latest news on the world of web technologies with a series of tutorial Take a look.

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Michael Tong

Written by

Coding is nothing but a renovation of ideas through fundamental concepts. Stay sharp and stay hungry to learn!

Weekly Webtips

Explore the world of web technologies through a series of tutorials

Michael Tong

Written by

Coding is nothing but a renovation of ideas through fundamental concepts. Stay sharp and stay hungry to learn!

Weekly Webtips

Explore the world of web technologies through a series of tutorials

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