Create your account

Already have an account? Login here

Note: By joining, you will receive periodic emails from Coursetro. You can unsubscribe from these emails.

Create account

Learn the CSS Grid by Example (The New CSS Grid Tutorial)

By Gary simon - Oct 08, 2017

When I designed my very first layout in the mid 90's, you used HTML tables to structure layouts with the aid of image slicing tools like Fireworks.

Then, we moved to inlines and floats for quite some time. After that came Flexbox, and now we've arrived at the CSS Grid. Yay!

The CSS Grid solves layout problems that no other css solutions could handle well. In this tutorial, you're going to learn how to build a layout and get your feet wet with the CSS Grid.

This tutorial is in no way going to be comprehensive; it will just serve as a quick starter that will hopefully facilitate your eagerness to explore the full potential of the CSS grid.

So, let's get started.

We have some pretty awesome courses

Check them out

If you prefer watching a video instead..

Be sure to Subscribe to the Official Coursetro Youtube Channel for more awesome videos!

Layout Preview

This is the very simple layout that we're going to build. I kept it simple so that we can breeze through this with relative ease. It's a fictional layout meant to espouse some of my snobby Libertarian views!

Project Setup

To keep this tutorial succint and precise as possible, we're not going to include any frameworks or build tools. We're literally going to work with a single HTML, CSS and an image file.

Create a new project folder and add a empty index.css file, along with an index.html file with the following contents:

<!DOCTYPE html>
<html class="no-js" lang="en">
    <head>

        <title>CSS Grid Tutorial</title>
        <meta http-equiv="x-ua-compatible" content="ie=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700" rel="stylesheet">
        <link media="all" type="text/css" rel="stylesheet" href="index.css">

    </head>
    <body>

    </body>
</html>

Also, download the single logo graphic (right click, save as and add it in the project folder next to the other 2 files).

Defining the HTML

Within the <body> tags from above, we're going to define 3 sections. The header, main content section and a footer which will contain and unordered list of the 3 panels:

        <header>
            <a href="#">Libertians > *</a>
        </header>

        <div class="container">
            <div id="content">
                <h1>Down with the state</h1>
                <p>Abandon the left vs. right paradigm and adopt new ideals, where consistency and logic reign supreme.</p>
            </div>
            <img src="logo.png" />
        </div>

        <footer>
            <ul>
                <li>
                    <span>But what about the roads?</span>
                    You just don't understand economics, like supply and demand. Don't worry kiddo, where there's a demand there will be a supply; we'll all have our roads.
                </li>
                <li>
                    <span>Is taxation theft?</span>
                    If I came to your house with some heavily armed buddies, demanded that you and your neighbors give me a percentage of your income, in return for some crappy monopolized services that you didn't ask for, would you consider that theft?
                </li>
                <li>
                    <span>So, what you're saying is...?</span>
                    Libertarians want to live in a world where gay couples can protect their poppy fields with fully automatic weapons.

A world where voluntaryism and property rights are treated with the highest respect.
                </li>

                <li> <!-- Repeat this 3 more times, so we have a total of 6 -->
                <li> <!-- Repeat this 3 more times, so we have a total of 6 -->
                <li> <!-- Repeat this 3 more times, so we have a total of 6 -->
            </ul>
        </footer>

Alright, simple enough, now let's use the CSS grid to structure this bad boy.

Defining Some Basic CSS Rulesets

Just for basic aesthetics, let's define some CSS rulesets and properties. This will include basic stuff like fonts, colors, etc..

In the index.css paste the following properties:

body {
    font-family: 'Source Sans Pro';
    background:red;
    margin:0;
    color:white;
}

a {
    text-decoration:none;
    color:red;
    font-size:1.8em;
    font-weight:700;
}
img { 
    width:150px;
}
header {
    background:#FFFFFF;
    padding: 1em;
}

.container {
    padding: 4em 1em;
}

footer {
    background:#571212;
}

ul {
    margin:0;padding:0;
}
ul li {
    padding: 2em;
    color:#E98A8A;
}
ul li span {
    display:block;
    font-size:1.4em;
    margin-bottom:1em;
    color: white;
}

This is the only regular CSS we need for the layout. Now, the only thing that remains is defining the CSS grid properties.

Defining the CSS Grids

To define a basic CSS grid, we place display: grid on an element. Where would it make sense to do this?  Well, our main content area has 2 columns, and the footer area has 3:

The top grid has 1 row, and 2 columns. The bottom grid (when we have 6 different <li> elements ) has 2 rows and 3 columns.

Let's add a CSS grid to the top content area:

.container {
    display:grid;
    grid-template-columns: 66% auto;
    padding: 4em 1em;
}

The grid-template-columns property defines the number of columns which is done by defining a value, separated by a space. Each value and space signifies another column.

Let's define the footer grid elements:

ul {
    display:grid;
    list-style-type:none;
    margin:0;padding:0;
    grid-template-columns: repeat(3, auto);
    grid-template-rows: repeat(2, auto);
}

This time, we used repeat(), which is a quick way of saying: grid-template-columns: auto auto auto 

We also added grid-template-rows which works in the same way as columns, except it simply defines the rows.

Try experimenting with these values! What if you wanted 2 columns and 3 rows?, simply reverse the 3 and the 2 from the above ruleset.

Also, what if we wanted to center our graphic? The CSS grid allows children or items to be aligned quite easily. You can use justify-self to position items:

img { 
    width:150px;
    justify-self:center;
}

Nesting the CSS Grid & Template Areas

You can, of course, nest the CSS grid. Let's do this by actually making the body element its own actual grid!

body {
    font-family: 'Source Sans Pro';
    background:red;
    margin:0;
    color:white;
    display:grid;
    grid-template-columns: auto;
    grid-template-rows: auto 60% 40%;
    grid-template-areas: 
    "header"
    "body"
    "footer";
}

Okay, so what's happening here? We have 1 column set to auto, and we have 3 different rows (the header, content and footer sections).

grid-template-areas allows us to position various grid areas by referring to their name, and situating them in the value of this property.

In order for it to work however, we need to define these names (header, body, footer) in their respective rulesets. Add the following properties and values:

header {
    grid-area: header;
    /* Other properties removed for brevity */
}

.container {
    grid-area: body;
    /* Other properties removed for brevity */
}

footer {
    grid-area: footer;
    /* Other properties removed for brevity */
}

Now if we save and refresh, we'll see nothing appears to have changed. But the true power of template areas come into play when we work in responsive media queries.

Responsive CSS Grid

What if, for some strange reason, we wanted on smaller viewports to switch the footer section with the body section?

Simple!

@media only screen and (max-width: 500px) {
    
    body {
        grid-template-areas: 
            "header"
            "footer"
            "body";
    }

}

Now, if you drag your browser window in, it will automatically replace these two grid areas with each other. This was never possible with pure CSS before, but now it is. 

Let's make both the footer and container sections 1 column (and align the container text to the center):

@media only screen and (max-width: 500px) {
    
    body {
        grid-template-areas: 
            "header"
            "footer"
            "body";
    }

    ul, .container {
        grid-template-columns: auto;
        grid-template-rows: auto;
    }

    .container {
        text-align:center;
    }
    
}

Now, we have our responsive CSS grid layout looking pretty nice!

Conclusion

We've only just begun to touch the possibilities of the CSS grid. There are plenty of other properties and values that give you an immense amount of control over your layouts.

Hopefully this quick crash course will be enough to intrigue you going forward.


Share this post




Say something about this awesome post!