CodeClouds Color Logo CodeClouds White Logo


Basic CSS Grids: the Ten Minute Guide

Those of us who have been writing CSS for a while remember a time before Grid, when all we could do was hack together tables and float, and pray for the best. Even flexbox (an absolute gamechanger) wasn’t perfect—it has issues with 3D layout, and gives you less control over the size of the individual elements. I still use flexbox all the time (hey, sometimes automatic > stick) but grid is a wonderful tool to have, and I’m happy I’ve been given the opportunity to share it with you all.

CSS Grid For Beginners

First things first, you’re going to want to set up your container.

In the HTML:

<div class="container">
   <div class="item">1</div>
   <div class="item">3</div>
   <div class="item">3</div>
   <div class="item">4</div>
   <div class="item">5</div>
   <div class="item">6</div>
   <div class="item">7</div>
   <div class="item">8</div>
   <div class="item">9</div>

and in the CSS:

    display: grid;
    grid-template-columns: 5rem 5rem 5rem;
    grid-template-rows: 5rem 5rem 5rem;

Which should give you something that looks like this:

View of a grid system

Very basic, but everything starts somewhere.

display: grid tells your browser that it’s a grid, grid-template-columns (and its sister grid-template-rows) defines what’s in it. Display: grid will not work until you define either columns or rows. If all your columns and/or rows are the same size, you can use the repeat() function, so our CSS could read grid-template-columns: repeat(3, 5rem); grid-template-rows: repeat(3, 5rem); and function exactly the same, but be cleaner and easier to adjust later.

Next we need to think about grid-gap, which is the size of the margins between columns.

    display: grid;
    grid-template-columns: 5rem 5rem 5rem;
    grid-template-rows: 5rem 5rem 5rem;

Surprise, it does this:

css grid system

You can fine-tune this with grid-row-gap and grid-column-gap if needed.

CSS Grids introduced a new unit of length called Fractional Units, or fr. fr are fractions of the free space remaining in the grid. I’m a bit of a traditionalist and prefer to stick with rem, but the option is there if you want to play around with it. The syntax is the same as any other unit, so for example, if you wanted to switch units you could change our setup above to grid-template-rows: repeat(3, 1fr).

Now, this is where it gets fun. We’ve set our column sizes, so that means we can’t change the size of anything within them, right? Well, no, we’ve just got to get clever with span.

To illustrate, we’re going to make a quick HTML change

<div class="item2">2</div>

then add the following to our CSS

 .item2 { grid-column: span 2; }


Grid system guide in 10 minutes

Ta dah, the second grid item is spread across two columns. I also made it millennial pink, to spare your eyeballs any more bare HTML. CSS Grid is capable of making new rows if your changes would push things onto a new line, as we see if we tweak another box:

 .item2 { grid-column: span 2; }
 .item6 { grid-column: span 3; }
View of a grid system

We can also use grid-column-start and grid-column-end to choose where a particular item sits horizontally in our grid, which gives us even more fine control over placement. You’ve probably noticed that 6 is a little awkward sitting on its own, so let’s try something else:

 .item6 { grid-column: span 1; grid-column-start: 2; grid-column-end: 3; }
View of a grid system

Some of you might be a little confused at this point: wait, start 2, end 3? That looks like start 2, end 2. You’ve noticed something critical in understanding how grids work: the numbers don’t refer to the boxes themselves, they refer to their boundaries.

CSS Grid System

So, if we set our item6 from 1 to 4, what will it look like?

 .item6 { grid-column: span 1; grid-column-start: 1; grid-column-end: 4; }

No peeking!

Have you got it yet?

You sure?

Okay, here goes.

Grid System in CSS

Easy! You’ve got this. And speaking of things you’ve got, it’s been five minutes and you’ve gone from Grid Zero to Grid Hero.

The next thing you want to do is start looking at frameworks. We have a beginners’ guide to Materialize you should check out. If you can tell which numbers on my diagrams are Arial and which are Helvetica, then you might also want to read our guide to font rendering, which goes a little deeper into fonts and how they’re displayed on different browsers.
If you’re looking for CSS development work, we have openings for frontend developer jobs in Kolkata on our careers page.

front end developer jobs in Kolkata
If you want to keep working with grids, I’ve made an editable copy of my millennial pink grid, which you can fork from here.

Originally written January 06, 2020. Last updated September 9th, 2020


Written by CodeClouds

CodeClouds provides effective and quality solutions for various web technologies. We have responsive and swift communication 18/5 and deliver quality development services around the globe.

  • facebook
  • twitter
  • linkedin
  • pinterest
  • whatsup
Related Articles
10 Crucial Elements for a High-Converting Landing Page (Including SEO Pro-Tip)

UI/UX | 23 March 2023

10 Crucial Elements for a High-Converting Landing Page (Including SEO Pro-Tip)

There’s a lot of competition for landing page conversions, so it’s critical to have well-designed landing pages that attract and convert visitors. We’ll let you in on few tips—from having a great CTA to minimalist navigation—for creating a high-converting landing page for your eCommerce business.

What Are Semantic Elements in HTML, Anyway?

UI/UX | 28 September 2022

What Are Semantic Elements in HTML, Anyway?

Containers are one of those technologies that have been around for a long time, but recent changes in the tech landscape have taken them from a curiosity to a critical pillar of our infrastructure in a few short years. Like JavaScript needed AJAX, containers really needed Docker—it took them from an obscure trick done by Level 9000 Linux Wizards to something you can set up in a few simple clicks. Now everybody is using containers, but the three musketeers of Docker, Kubernetes, and Helm remain right at the center of things.