Let’s learn about the most exciting thing to come to front end web layout in a long time. That is the technology of CSS Grid. CSS Grid is a brand new set of technologies that allows web designers and developers to incorporate powerful page layout techniques on the web. Traditionally, page layout of the web has been an extremely challenging practice. In the past we may have used tables, divs, layers, all kinds of CSS hacks, and ultimately CSS Frameworks like Foundation, Bootstrap, and others. Now we have CSS Grid, a very powerful two-dimensional layout tool for positioning items on web pages. You can create just about any layout you can think of with CSS Grid. Let’s take a look at some examples of how CSS Grid works now.

Grid Container

The first thing we want to do is to set up a grid container. We do this by setting the display property to grid. Any direct children of a defined grid container are now automatically grid items.

display: grid;

<html>

<head>

<style>

.grid-container {

display: grid;

}

</style>

</head>

<body>

</div>

</body>

</html>

Notice when we set display to grid, the items appear as stacked rows which span the whole width of the container. We have some images here with numbers as an example. You can see the grid lines as we have turned them on in Firefox for easy visualization.

display: inline-grid;

<html>

<head>

<style>

.grid-container {

display: inline-grid;

}

</style>

</head>

<body>

</div>

</body>

</html>

In the case of display being set to inline-grid, notice the grid items only span the width of the content.

Explicit Grid

Once we have the container set up, columns and rows can be explicitly defined using the grid-template-rows and grid-template-columns properties.

grid-template-rows

<html>

<head>

<style>

.grid-container {

display: grid;

grid-template-rows: 50px 75px;

}

</style>

</head>

<body>

</div>

</body>

</html>

Here, the first row explicitly has a height of 50 pixels, and the second row has a height of 75 pixels. All other rows simply use the height of the content they contain. In our case this is 100px by 100px images.

grid-template-columns

<html>

<head>

<style>

.grid-container {

display: grid;

grid-template-rows: 100px 100px;

grid-template-columns: 100px 100px 100px;

}

</style>

</head>

<body>

</div>

</body>

</html>

Now we have 2 rows and 3 columns all with an exact height and width of 100 pixels.

fr in grid-template-rows and grid-template-columns

<html>

<head>

<style>

.grid-container {

display: grid;

grid-template-rows: 1fr 1fr;

grid-template-columns: 1fr 1fr 1fr;

}

</style>

</head>

<body>

</div>

</body>

</html>

Fractional units are a great way to let the browser automatically divide up the free space into equal parts. This example shows two rows of equal parts, and three columns of equal dimensions. The images are only 100px by 100px, so they begin to the left in each grid cell by default.

Minimum and Maximum Grid Track Size

You can use the minmax() function to create grid tracks that use the available space, but that don’t shrink narrower than a defined size or grow beyond a defined size.

The minmax() function

<html>

<head>

<style>

.grid-container {

display: grid;

grid-template-rows: minmax(100px,150px) 1fr;

grid-template-columns: 1fr 1fr 1fr;

}

</style>

</head>

<body>

</div>

</body>

</html>

<html>

<head>

<style>

.grid-container {

display: grid;

grid-template-rows: 1fr 1fr;

grid-template-columns: minmax(100px,auto) 1fr minmax(100px,auto);

}

</style>

</head>

<body>

</div>

</body>

</html>

By combining minmax() and fr units, one can create all kinds of responsive designs that no longer need to make use of multiple media queries in the browser.

Repeating Grid Tracks

Rather than having to explicitly define every single row or column, you can use the repeat() function to say how many rows or columns you would like.

The repeat() function

<html>

<head>

<style>

.grid-container {

display: grid;

grid-template-rows: repeat(3, 1fr);

grid-template-columns: repeat(3, 1fr);

}

</style>

</head>

<body>

</div>

</body>

</html>

Gutters With Grid Gap

By default there is no space at all between rows and columns. You can define whitespace between rows and columns using grid-gap. Note that you can not apply any styling to gutters. These are only for white space.

grid-gap

<html>

<head>

<style>

.grid-container {

display: grid;

grid-template-rows: repeat(3, 1fr);

grid-template-columns: repeat(3, 1fr);

grid-gap: 10px;

}

</style>

</head>

<body>

</div>

</body>

</html>

<html>

<head>

<style>

.grid-container {

display: grid;

grid-template-rows: repeat(3, 1fr);

grid-template-columns: repeat(3, 1fr);

grid-row-gap: 5px;

grid-column-gap: 20px;

}

</style>

</head>

<body>

</div>

</body>

</html>

Positioning Items Using Grid Line Numbers

What makes CSS Grid very powerful is the ability to place content exactly where you want it. Here are a few examples of positioning images in precise locations on the grid.

grid-row-start(end) grid-column-start(end)

<html>

<head>

<style>

.grid-container {

display: grid;

grid-template-rows: repeat(2, 1fr);

grid-template-columns: repeat(3, 1fr);

}

.a {

grid-row-start: 2;

grid-row-end: 3;

grid-column-start: 3;

grid-column-end: 4;

}

</style>

</head>

<body>

</div>

</body>

How To Span Items Across Rows and Columns

In these examples we will add some div elements with some background coloring to show how grid items can be made to span multiple rows or columns as you wish.

<html>

<head>

<style>

.grid-container {

display: grid;

grid-template-rows: repeat(2, 1fr);

grid-template-columns: repeat(3, 1fr);

}

.a {

grid-column-start: 1;

grid-column-end: 4;

}

</style>

</head>

<body>

</div>

</body>

</html>

<html>

<head>

<style>

.grid-container {

display: grid;

grid-template-rows: repeat(2, 1fr);

grid-template-columns: repeat(3, 1fr);

}

.a {

grid-row-start: 1;

grid-row-end: 3;

}

</style>

</head>

<body>

</div>

</body>

</html>

<html>

<head>

<style>

.grid-container {

display: grid;

grid-template-rows: repeat(3, 1fr);

grid-template-columns: repeat(3, 1fr);

}

.a {

grid-row: 2 / 4;

grid-column: 2 / 4;

}

</style>

</head>

<body>

</div>

</body>

</html>

Named Grid Lines

It is possible to assign names to grid lines when defined using grid-template-columns and grid-template-rows. Once a line has a name, it can be referenced when trying to position an item in the grid. Here we set up some names for the row and column lines. Once in place, we then position a grid item by referencing the names we provided and not the actual line numbers.

<html>

<head>

<style>

.grid-container {

display: grid;

grid-template-rows: [row-1-start] 1fr [row-2-start] 1fr [row-2-end];

grid-template-columns: [col-1-start] 1fr [col-2-start] 1fr [col-3-start] 1fr [col-3-end];

}

.a {

grid-row-start: row-2-start;

grid-row-end: row-end;

grid-column-start: col-1-start;

grid-column-end: col-end;

}

</style>

</head>

<body>

</div>

</body>

</html>

How To Name and Position Grid Areas

An alternate method you can use for positioning items on the grid involves placing items using so-called named template areas. This approach is really pretty cool the way it works and is often referred to as a type of ascii-art method grid layout.

<html>

<head>

<style>

.grid-container {

display: grid;

grid-template-areas: "header header"

"content sidebar"

"footer footer";

grid-template-rows: 150px 300px 100px;

grid-template-columns: 1fr 200px;

}

</style>

</head>

<body>

</div>

</body>

</html>

Ok that is really cool!

We can easily reverse the above layout with a couple of simple tweaks.

<html>

<head>

<style>

.grid-container {

display: grid;

grid-template-areas: "header header"

"sidebar content"

"footer footer";

grid-template-rows: 150px 300px 100px;

grid-template-columns: 200px 1fr;

}

</style>

</head>

<body>

</div>

</body>

</html>

You can also position items using grid area names. In this example, the first div has the coloring. It is actually placed in the footer area however due to setting grid-row-start, grid-row-end, grid-column-start, and grid-column-end to the named footer.

<html>

<head>

<style>

.grid-container {

display: grid;

grid-template-areas: "header header"

"sidebar content"

"footer footer";

grid-template-rows: 150px 300px 100px;

grid-template-columns: 200px 1fr;

}

.a {

grid-row-start: footer;

grid-row-end: footer;

grid-column-start: footer;

grid-column-end: footer;

}

</style>

</head>

<body>

</div>

</body>

</html>

Implicit Grid

What happens when you only have say 3 grid cells defined in the CSS, yet you have 9 grid items in the html markup? In this scenario, you start running into the concept of the Implicit Grid. Any extra items beyond the specified space are auto-placed in the implicit grid. An implicit grid can be defined using the grid-auto-rows, grid-auto-columns, and grid-auto-flow properties.

This first example shows only 3 cells explicitly defined. We have 9 grid items to deal with however. In this case, we use grid-auto-rows: 150px; to add new rows that are 150 pixels tall for any automatically inserted items.

<html>

<head>

<style>

.grid-container {

display: grid;

grid-template-rows: 100px;

grid-template-columns: repeat(3, 1fr);

grid-auto-rows: 150px;

}

</style>

</head>

<body>

</div>

</body>

</html>

Implicitly created cells will flow as rows but you can change this to columns if you like using grid-auto-flow: column.

<html>

<head>

<style>

.grid-container {

display: grid;

grid-template-rows: 100px;

grid-template-columns: repeat(3, 1fr);

grid-auto-flow: column;

}

</style>

</head>

<body>

</div>

</body>

</html>

Aligning Grid Items With justify-items

There are so many ways you can align items in CSS Grid. Let’s look at a few examples here.

justify-items: start;

<style>

.grid-container {

display: grid;

grid-template-rows: repeat(3, 240px);

grid-template-columns: repeat(3, 243px);

justify-items: start;

}

</style>

justify-items: end;

<style>

.grid-container {

display: grid;

grid-template-rows: repeat(3, 240px);

grid-template-columns: repeat(3, 243px);

justify-items: end;

}

</style>

justify-items: center;

<style>

.grid-container {

display: grid;

grid-template-rows: repeat(3, 240px);

grid-template-columns: repeat(3, 243px);

justify-items: center;

}

</style>

justify-items: stretch;

<style>

.grid-container {

display: grid;

grid-template-rows: repeat(3, 240px);

grid-template-columns: repeat(3, 243px);

justify-items: stretch;

}

</style>

Aligning Grid Items With align-items

All of the examples above for justify-items, also holds true for align-items.

align-items: start;

<style>

.grid-container {

display: grid;

grid-template-rows: repeat(3, 240px);

grid-template-columns: repeat(3, 243px);

align-items: start;

}

</style>

align-items: end;

<style>

.grid-container {

display: grid;

grid-template-rows: repeat(3, 240px);

grid-template-columns: repeat(3, 243px);

align-items: end;

}

</style>

align-items: center;

<style>

.grid-container {

display: grid;

grid-template-rows: repeat(3, 240px);

grid-template-columns: repeat(3, 243px);

align-items: center;

}

</style>

align-items: stretch;

<style>

.grid-container {

display: grid;

grid-template-rows: repeat(3, 240px);

grid-template-columns: repeat(3, 243px);

align-items: stretch;

}

</style>

Lastly, you can combine the justify-items and align-items properties in an almost limitless fashion allowing you to create any type of layout alignments you want. Here we simply put everything right in the center on both the x and y axis.

<style>

.grid-container {

display: grid;

grid-template-rows: repeat(3, 240px);

grid-template-columns: repeat(3, 243px);

justify-items: center;

align-items: center;

}

</style>

Aligning Individual Grid Items

The examples just above show us how to justify and align items on the entire grid at once. You can take this further an align each individual grid element however you like. Let’s see a few examples of how to do that.

<html>

<head>

<style>

.grid-container {

display: grid;

grid-template-rows: 240px;

grid-template-columns: repeat(3, 243px);

}

.a {

justify-self: start

}

.b {

justify-self: center

}

.c {

justify-self: end

}

</style>

</head>

<body>

</div>

</body>

</html>

<html>

<head>

<style>

.grid-container {

display: grid;

grid-template-rows: 240px;

grid-template-columns: repeat(3, 243px);

}

.a {

align-self: start

}

.b {

align-self: center

}

.c {

align-self: end

}

</style>

</head>

<body>

</div>

</body>

</html>

<html>

<head>

<style>

.grid-container {

display: grid;

grid-template-rows: 240px 240px;

grid-template-columns: repeat(3, 243px);

}

.a {

justify-self: start;

align-self: start;

}

.b {

justify-self: center;

align-self: center;

}

.c {

justify-self: end;

align-self: start

}

.d {

justify-self: start;

align-self: end;

}

.e {

justify-self: center;

align-self: center;

}

.f {

justify-self: end;

align-self: end;

}

</style>

</head>

<body>

</div>

</body>

</html>

How To Align Grid Tracks

You can align all of the grid tracks together relative to the grid container for interesting effect. We can look at a few of these examples here.

justify-content: start;

Aligns the grid to be even with the starting edge of the grid container.

<html>

<head>

<style>

.grid-container {

display: grid;

height: 500px;

grid-template-rows: repeat(3, 100px);

grid-template-columns: repeat(3, 100px);

grid-gap: 25px;

justify-content: start;

}

</style>

</head>

<body>

</div>

</body>

</html>

justify-content: end;

Aligns the grid to be even with the ending edge of the grid container.

<html>

<head>

<style>

.grid-container {

display: grid;

height: 500px;

grid-template-rows: repeat(3, 100px);

grid-template-columns: repeat(3, 100px);

grid-gap: 25px;

justify-content: end;

}

</style>

</head>

<body>

</div>

</body>

</html>

justify-content: center;

Places the grid in the middle of the grid container.

<html>

<head>

<style>

.grid-container {

display: grid;

height: 500px;

grid-template-rows: repeat(3, 100px);

grid-template-columns: repeat(3, 100px);

grid-gap: 25px;

justify-content: center;

}

</style>

</head>

<body>

</div>

</body>

</html>

justify-content: space-around;

Sets an even amount of space between each grid item and half sized spaces on the ends.

<html>

<head>

<style>

.grid-container {

display: grid;

height: 500px;

grid-template-rows: repeat(3, 100px);

grid-template-columns: repeat(3, 100px);

grid-gap: 25px;

justify-content: space-around;

}

</style>

</head>

<body>

</div>

</body>

</html>

justify-content: space-between;

Sets an even amount of space in between each grid item but there is no space at the far ends.

<html>

<head>

<style>

.grid-container {

display: grid;

height: 500px;

grid-template-rows: repeat(3, 100px);

grid-template-columns: repeat(3, 100px);

grid-gap: 25px;

justify-content: space-between;

}

</style>

</head>

<body>

</div>

</body>

</html>

justify-content: space-evenly;

Sets an even amount of space in between each grid item even the far ends.

<html>

<head>

<style>

.grid-container {

display: grid;

height: 500px;

grid-template-rows: repeat(3, 100px);

grid-template-columns: repeat(3, 100px);

grid-gap: 25px;

justify-content: space-evenly;

}

</style>

</head>

<body>

</div>

</body>

</html>

When using align-content for grid tracks, here are the results we see.

align-content: start;

Aligns rows to the start of the column axis and is the default value.

<style>

.grid-container {

display: grid;

height: 500px;

grid-template-rows: repeat(3, 100px);

grid-template-columns: repeat(3, 100px);

grid-gap: 25px;

align-content: start;

}

</style>

align-content: end;

Rows get aligned to the end of the column axis.

<style>

.grid-container {

display: grid;

height: 500px;

grid-template-rows: repeat(3, 100px);

grid-template-columns: repeat(3, 100px);

grid-gap: 25px;

align-content: end;

}

</style>

align-content: center;

Aligns rows to the center of the column axis.

<style>

.grid-container {

display: grid;

height: 500px;

grid-template-rows: repeat(3, 100px);

grid-template-columns: repeat(3, 100px);

grid-gap: 25px;

align-content: center;

}

</style>

align-content: space-around;

Any extra space inside the grid container is set to the start and end of each row track.

<style>

.grid-container {

display: grid;

height: 500px;

grid-template-rows: repeat(3, 100px);

grid-template-columns: repeat(3, 100px);

grid-gap: 25px;

align-content: space-around;

}

</style>

align-content: space-between;

Extra space is distributed between the row tracks.

<style>

.grid-container {

display: grid;

height: 500px;

grid-template-rows: repeat(3, 100px);

grid-template-columns: repeat(3, 100px);

grid-gap: 25px;

align-content: space-between;

}

</style>

align-content: space-evenly;

Extra space is distributed evenly between the rows and at the start and end of the track.

<style>

.grid-container {

display: grid;

height: 500px;

grid-template-rows: repeat(3, 100px);

grid-template-columns: repeat(3, 100px);

grid-gap: 25px;

align-content: space-evenly;

}

</style>

Learn More About CSS Grid

This tutorial is enough to spark your curiosity for CSS Grid. There are thousands of additional resources you can learn from to create the most awesome layouts you’ve ever seen! Here are a few good ones to get you going.

Learn CSS Grid in 5 Minutes (Free Code Camp)
CSS Grid Layout: A Quick Start Guide (Tuts Plus)
Getting Started with CSS Grid Layout (Scotch.io)
Learn the CSS Grid by Example (Coursetro)
Best Practices With CSS Grid Layout (Smashing Magazine)
CSS Grid Garden – A game for learning CSS grid (Codepip)
Create a responsive layout with CSS Grid (Creativebloq)
Grid by Example – Everything you need to learn CSS Grid Layout (Grid By Example)
CSS Grid – Table layout is back. Be there and be square (Google Developers)
25 Lesson CSS Grid Video Tutorial Playlist (Wes Bos)

CSS Grid Tutorial Summary

Here are some summary concepts regarding CSS Grid.

CSS Grid Has Fixed and flexible track sizes: Web Designers can create grids with fixed track sizes, such as using pixels for example. This approach defines the grid to the specified pixel which fits to the layout desired. One can also create grids using flexible sizes such as with percentages or with the new fr unit designed for this application.
Precise Item placement: Developers can place page elements into a precise location on the CSS grid by using line numbers, names, or by targeting an area of the grid. CSS Grid also contains an algorithm to implicitly control the placement of elements not given an explicit position on the grid.
Automatic track creation to hold content: Web Developers can configure an explicit grid with grid layout however the specification also allows for content added outside of a declared grid. This adds additional rows and columns when needed.
Exceptional Alignment Control: As we saw with the many examples in this tutorial, there are a myriad of ways to align content of the grid and grid items. Developers can control how the items align once placed into a grid area, and how the entire grid is aligned. There is extreme flexibility regarding alignments.
Control of overlapping content: With CSS Grid, you can now configure page elements to completely or partially overlap for not seen before effects on web pages. Any layering may then be controlled with the familiar z-index property.
CSS Grid is a very powerful layout technology that promises to change how the web is developed for today and in the future. When combined with other powerful layout tools such as Flexbox, developers can create layouts that were previously impossible to build in CSS.