Grid Layouts

This chapter will introduce the CSS Grid layout model, another powerful and flexible way to design responsive web layouts with CSS.

I find Flex more useful for most things, but I'd still like to briefly introduce the concept so that you can create a design that requires something more like a grid.

Grid enables you to define both rows and columns simultaneously.

This two-dimensional layout system is excellent for creating intricate designs and ensuring precise control over the placement of your elements.

As usual, we will introduce new terminology, but don't worry about remembering everything immediately; you can always come back and review when needed. These concepts become learned with practice, not with study.

Let's understand some basic CSS Grid terminology:

• Grid Container: The parent element that contains grid items. To create a grid container, you set the display property of the parent to grid or inline-grid.
• Grid Items: The direct children of the grid container.
• Grid Line: The lines that divide the grid into rows and columns.
• Grid Track: The space between two grid lines (essentially, a row or column).
• Grid Cell: The intersection of a grid row and grid column.
• Grid Area: A rectangular space surrounded by four grid lines.

Here's a diagram showing a "grid" with 5 rows and 5 columns to help visualize the information above. The grid line is the line separating each column/row:

Creating a Grid

To start using CSS Grid, you need to define a grid container.

This is as simple as adding the following to your parent container:

.container {
  display: grid;
}

Now, given a block of elements, let's create our first practical grid example, first create 4 elements in our grid container:

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

Then, let's apply some grid-template-columns and grid-template-rows.

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 100px 100px;
  gap: 10px;
}

.item {
  background-color: lightblue;
  text-align: center;
  line-height: 100px;
}

The 1fr means "one fraction," so by saying 1fr 1fr, we get half and half. Then, we used fixed heights for the template rows (which shouldn't be new to you now).

Here's an example with the children being given fixed heights and fractional widths:

Play with the code to see what happens when you update the properties.

Main Properties of a Grid Container

grid-template-columns & grid-template-rows

• Defines the number of columns and rows in the grid and their sizes.
• Values can be length, percentage, fraction, or the repeat() function.

.container {
  display: grid;
  grid-template-columns: 100px 200px; /* Two columns with specified widths */
  grid-template-rows: 150px 150px; /* Two rows with specified heights */
}

The repeat() keyword is new. So let's see how we could use that. So if we were trying to create 3 columns of 1fr, you might use grid-template-columns: 1fr 1fr 1fr;. But we can use the repeat keyword to shorten it:

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 100px);
  gap: 10px;
}

And here's the output:

gap

• Defines the space between grid items.
• Values: A length value. We have used this in our CodePen examples to help separate our columns and rows.

.container {
  display: grid;
  gap: 10px; /* Adds space between rows and columns */
}

grid-column & grid-row

• Specifies the start and end positions for a grid item.
• Values: Can be a specific line number or the span keyword.

In short, these can be used to choose where items are specified in the grid.

Here's an example with 5 columns and 3 rows:

.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(3, 100px);
  gap: 10px;
  background-color: #333;
}

.item1 {
  grid-column: span 3; /* Spans across three columns */
  grid-row: 1; /* Placed in the first row */
  background-color: lightblue;
  text-align: center;
  font-family: arial;
  font-size: 30px;
}

.item2 {
  grid-column: 3 / span 2; /* Spans two columns from the third column */
  grid-row: 3; /* Placed in the third row */
  background-color: lightblue;
  text-align: center;
  font-family: arial;
  font-size: 30px;
}

Here's the output:

And here is the code to play with.

Practical CSS Grid Layout Example

Let's create a more complex layout using CSS Grid, including a header, sidebar, main content, and a footer.

<div class="container">
  <header class="header">Header</header>
  <aside class="sidebar">Sidebar</aside>
  <main class="main">Main Content</main>
  <footer class="footer">Footer</footer>
</div>

.container {
  display: grid;
  grid-template-columns: 1fr 3fr; /* Two columns, sidebar is 1 part, main is 3 parts */
  grid-template-rows: auto 1fr auto; /* Header and footer take minimal space, main takes remaining */
  gap: 10px;
  height: 100vh;
}

.header {
  grid-column: 1 / -1; /* Spans across all columns */
  background-color: lightcoral;
}

.sidebar {
  grid-row: 2 / 3;
  background-color: lightgreen;
}

.main {
  grid-row: 2 / 3;
  background-color: lightblue;
}

.footer {
  grid-column: 1 / -1;
  background-color: lightgoldenrodyellow;
}

This layout allows for a responsive design with a header spanning the entire width, a sidebar taking up one part of the width, the main content taking up the remaining space, and a footer spanning the whole width.

Here's the code to play with.

Remember to practice these skills to get comfortable with Grid properties and their usage.

As a cheatsheet, one of my most visited guides on CSS Grid is this A Complete Guide to Grid. It's worth bookmarking for when you are trying to figure things out.