CSS Grids

Introduction

While Flexbox works one-dimensionally, either vertically or horizontally (X and Y axis), CSS Grids can work two-dimensionally at the same time. This allows you to create more advanced layouts using the single system.

CSS Grids is so-named because it’s based on the idea of a grid running horizontally and vertically across and down the screen. We can use CSS Grids to determine how many horizontal and vertical spaces in the grid each element should take up.

Important Concepts

Grid Container

• To get started using CSS Grids, you need to create what is called the Grid Container.
• To do this, set display: grid on a parent element.
• This will allow you to use CSS Grids to create rows and columns inside of that element.

Grid Item

• A grid item is one of the direct child elements to the Grid Container.
• These are the items that will take up space in our grids.

Grid Gap

• The Grid Gap refers to the space between columns and rows in the grid.

Grid-template-columns and rows

• To control the size of rows or columns you use grid-template-columns and grid-template-rows.

<section class="container">
  <div>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec scelerisque
      bibendum enim.
    </p>
  </div>
  <div>
    <p>Sed convallis malesuada nisl, id laoreet nulla vulputate nec.</p>
  </div>
  <div>
    <p>In varius ac ipsum in interdum.</p>
  </div>
  <div>
    <p>
      Vivamus ornare pretium mauris, tristique vulputate ex porttitor non.
      Nullam mattis lorem mattis fermentum pulvinar.
    </p>
  </div>
</section>

.container {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: 1fr auto;
  grid-gap: 10px;
  min-height: 400px;
}

.container div {
  background: lightblue;
}

• The CSS above creates a grid container with two columns. The first column is set to auto and takes up as much space as it requires on the page. The second column is set to 1fr and takes up the remaining available space left over.
• The grid container also has two rows. The first is set to 1fr meaning it takes up whatever space is left, the second is set to auto so only takes up the space it needs. It’s important to see the min-height which allows us to see the row heights.

Grid-template-areas

• One of the nicest aspects of CSS Grids is the ability to create grid areas. Especially useful is that the syntax (how the CSS is written) is how it will appear on the page.
• If you had a header, nav, main, footer in your HTML, you could set these areas as a grid-area.

<header>
  <h1>Welcome to My Website</h1>
</header>
<nav>
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</nav>
<main>
  <h2>This site is about a topic</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <p>
    Donec scelerisque bibendum enim. Sed convallis malesuada nisl, id laoreet
    nulla vulputate nec.
  </p>
</main>
<footer>&copy; Copyright</footer>

header {
  grid-area: myheader;
  background: orange;
}
nav {
  grid-area: mynav;
  background: lightblue;
}
main {
  grid-area: mymain;
  background: lightgreen;
}
footer {
  grid-area: myfooter;
  background: yellow;
}

body {
  display: grid;
  grid-template-areas:
    "myheader mynav"
    "mymain mynav"
    "mymain myfooter";
}

• Note the property grid-area is used to create the area, and the value myheader etc. is decided by the developer.
• With the grid-areas defined, we can use grid-template-areas to arrange our content into rows and columns.

Special Units & Functions

fr units

You’ll likely end up using a lot of fractional units in CSS Grid, like 1fr. They essentially mean “portion of the remaining space”. So a declaration like:

grid-template-columns: 1fr 3fr;

Means, loosely, 25% 75%. Except that those percentage values are much more firm than fractional units are. For example, if you added padding to those percentage-based columns, now you’ve broken 100% width (assuming a content-box box model). Fractional units also much more friendly in combination with other units, as you can imagine:

grid-template-columns: 50px min-content 1fr;

Sizing Keywords

When sizing rows and columns, you can use all the lengths you are used to, like px, rem, %, etc, but you also have keywords:

• min-content: the minimum size of the content. Imagine a line of text like “E pluribus unum”, the min-content is likely the width of the word “pluribus”.
• max-content: the maximum size of the content. Imagine the sentence above, the max-content is the length of the whole sentence. auto: this keyword is a lot like fr units, except that they “lose” the fight in sizing against fr units when allocating the remaining space.
• fit-content: use the space available, but never less than - min-content and never more than max-content.
• fractional units: see above

Sizing Functions

The minmax() function does exactly what it seems like: it sets a minimum and maximum value for what the length is able to be. This is useful for in combination with relative units. Like you may want a column to be only able to shrink so far. This is extremely useful and probably what you want:

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

• The min() function.
• The max() function.

The repeat() Function and Keywords

The repeat() function can save some typing:

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

/* easier: */
grid-template-columns: repeat(8, 1fr);

/* especially when: */
grid-template-columns: repeat(8, minmax(10px, 1fr));

But repeat() can get extra fancy when combined with keywords:

auto-fill: Fit as many possible columns as possible on a row, even if they are empty. auto-fit: Fit whatever columns there are into the space. Prefer expanding columns to fill space rather than empty columns.

Excerise (20min)

Resources

Bookmark this Grid guide

Activities

Activity 1

WATCH

This tutorial video on CSS grids. (8m 38s)

Activity 2

READ

A Complete Guide to Grid by CSS Tricks, use this as a reference guide. You might find it difficult to read it all in one go, so read a bit and then experiment and come back to it.

Activity 3

WATCH

Video: Build a Classic Layout FAST in CSS Grid (8m 29s)

Lesson Task

Brief

There are practice questions in the master branch of this repo.

Attempt the answers before checking them against the answers in the answers branch of the repo.