Simply put, CSS Grid is one of the first true layout engines designed from the ground up with modern needs in mind (fancy way of saying you can design a website in some really creative ways).

And it not only allows for truly remarkable websites, it is also laying the foundation for the future of web development today.

If you do anything related to website building, you need to know CSS Grid.

We're going to teach you everything you need to know so you can start using this exciting layout engine right away.

The lines you see here will be a visual helper as we explain how CSS Grid works.

First, let's look at the code needed to make a grid (you won't see the grid just yet).

.the-grid {
  display: grid;
}

And that's it! We just created our first grid. Cue the trumpets!

But it's not doing much yet. We've only created our grid container, we need to give it some grid items to see what it's doing.

In the next screen, we've put together an example we'll be working with so you can see how it all works as we start building out our grid.

One of the coolest parts of CSS Grid is how specific it is. Crafting layouts is as simple as one new line of CSS and specifying the values for each track added. Think of a track as a lane to place your content.

Here, we're working across the horizontal axis (called the X axis) by adding columns of a certain size using something called the grid-template-columns property:

.the-grid {
  display: grid;
  grid-template-columns: 200px 300px 400px;
}

(If you're feeling overwhelmed, don't worry! We're just showing you how it all works before we show you the EASY way to manage everything).

In our example above, we're using a pixel value (px) to set our spacing. This is well and good, but there is another option that is a little more flexible.

If equal-width columns is what you seek, the fr unit is where to start. This flexible fella does the math for you and will intelligently size itself up or down to fill all remaining space in your grid.

Whereas percentages are finicky and require constant maintenance if you want to add spacing between items, fr units just go with the flow, which is helpful because things are starting to feel a bit cramped in this layout. It'd be nice if we could give it a gap or something...

Wouldn't you know it, CSS Grid has us covered yet again with something called the grid-gap property. See how it helps our grid spacing by dragging the white circle below.

Try it out!

.the-grid {
  display: grid;
  grid-gap: px;
  grid-template-columns: 1fr 1fr 1fr;
}

Now that we're picking up steam, it's time to reveal CSS Grid's true superpower: two-dimensional relationships.

CSS Grid is the first specification to give us complete control over the templating of both the X (horizontal) and Y (vertical) axis in our layouts. Meet your new friend grid-template-rows:

.the-grid {
  display: grid;
  grid-gap: px;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 2fr 1fr;
}

Previously, our grid items were spilling over into “auto-generated” row tracks since their count was larger than the number of columns available. Now, we're explicitly telling the grid to give us an initial row with a height of 1fr and a second row with a height of 2fr.

In addition to our fr unit being flexible, it's also relational, meaning it can size itself relatively to other items across an axis. In this case, we're essentially telling our second row track to be twice as tall as our first row track.

Tip: An important thing to remember here is that we're sizing the tracks, not the items themselves. This is crucial to leveraging another powerful feature of CSS Grid: justification and alignment.

Both of these properties refer to how grid items are oriented across a particular axis inside their respective cells. justify-items pertains to the X axis. align-items pertains to the Y axis.

So far, our grid items have been using stretch for these properties, but we can also use any combination of start, center, and end across each axis to achieve numerous variations in each layout. Try it out using the arrows in the lower-right box!

.the-grid {
  display: grid;
  grid-gap: px;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 2fr;
  justify-items: ;
  align-items: ;
}

Take note of the code snippet above and how it changes as the buttons are clicked. This is just one example of how you can place grid items within their cells.

CSS Grid is part of the future of web design. Investing the time to learn it today ensures a strong foundation for your websites tomorrow.

The most important thing to remember is that CSS Grid is one of the first true layout engines built from the ground up with the needs of modern web developers in mind.

If you can dream it, you can build it with Grid. And believe it or not, we haven't even scratched the surface of all the CSS Grid possibilities.

And remember how we told you there was an easy way to bring all this together?