CSS - Grid Part 1

Jun 23, 2026 3:00pm UTC (Check your timezone)

Theory Workshop

Instructors: Jess, Carmen, and Eda

Grid

Download iCal File

Before this session, please:

During this session, we’ll:

After this session, please:

Instructor notes

Working with CSS Grid: What Is CSS Grid, and How Does It Differ from Flexbox?

CSS Grid helps us create complex layouts easily, dividing the page into rows and columns.

To create a grid, we can set the display property to the value grid. We can specify the number of columns and the gap that the grid elements should have (in this example, it’s three equal-width columns with 20 pixel gaps):

1.container {
2  display: grid;
3  grid-template-columns: 1fr 1fr 1fr;
4  grid-gap: 20px;
5}

Some differences between Flexbox and Grid are:

One example of using both Flexbox and Grid is using Grid for the whole page layout and Flexbox for aligning items within each grid area.

Working with CSS Grid: How Can You Create Flexible Grids with the fr Unit?

The fr unit represents a fraction of the space for the grid container.

For example, each column can take up one fraction of the available space. Here, all four columns will have an equal share of the space available in the grid container:

1.grid-container {
2  display: grid;
3  grid-template-columns: 1fr 1fr 1fr 1fr;
4}

Using fr helps us create flexible, responsible layouts that can adapt to different screen sizes.

Working with CSS Grid: How Can You Create Gaps Between Tracks in a Grid?

In a CSS Grid, a track is the space between two adjacent grid lines. Tracks are automatically created when we use CSS Grid.

To create gaps, we can use the properties:

The possible values for all of them are length (with units like px, rem, and so on), percentages, or the normal keyword.

The gap property is a shorthand: if there’s one value, it will apply to both rows and columns; if there are two values, the first one will be the row-gap, and the second will be the column-gap.

Working with CSS Grid: How Can You Repeat Track Listings in a Grid Layout?

The repeat() function is used to repeat a section or all of the tracks for columns or rows.

For example, instead of this:

1.grid-container {
2  display: grid;
3  grid-template-columns: 1fr 1fr 1fr 1fr;
4}

We can use repeat():

1.grid-container {
2  display: grid;
3  grid-template-columns: repeat(4, 1fr);
4}

repeat() can also have multiple units. In this case, the first and third columns will be 20px, and the second and fourth columns will be 1fr:

1.grid-container {
2  display: grid;
3  grid-template-columns: repeat(2, 20px 1fr);
4}

Working with CSS Grid: What Is the Difference Between an Implicit and Explicit Grid?

The rows and columns that are automatically created by the browser when defining a grid layout are implicit, as opposed to explicitly defined rows and columns with grid-template-rows or grid-template-columns.

The implicitly defined rows and columns can be controlled with the properties grid-auto-columns and grid-auto-rows. They default to auto.

Implicit grid is useful for dynamic layouts where content changes a lot, while explicit layout is useful when the structure of the page is predictable.

Working with CSS Grid: What Is the minmax() Function and How Does It Work?

The range for the size of a grid track can be defined with the minmax() function. We can set a minimum and maximum size for the grid track.

Here, the first column will be at least 150px, and at most 300px, while the second column takes up any available remaining space:

1.grid-container {
2  display: grid;
3  grid-template-columns: minmax(150px, 300px) 1fr;
4  gap: 20px;
5}

Working with CSS Grid: How Do the grid-column and grid-row Properties Work?

We can use the grid-row and grid-column properties to define the start line and end line for rows and columns.

Here, the item will start an column 1, and take up space up to column 3:

1.item1 {
2  grid-column: 1 / 3;
3}

The span keyword can also be used to tell the grid item which row and column to span across. For example, this will be the same as the example above:

1.item1 {
2  grid-column: 1 / span 2;
3}

Working with CSS Grid: How Can You Position Items on the Grid Using the grid-template-areas Property?

With the grid-template-areas property, we can use named labels to design a grid layout.

 1<div class="grid-container">
 2  <div class="header">
 3    <h2>Header</h2>
 4  </div>
 5  <div class="sidebar-left">
 6    <h2>Left Sidebar</h2>
 7  </div>
 8  <div class="main"><h2>Main Content</h2></div>
 9  <div class="sidebar-right">
10    <h2>Right Sidebar</h2>
11  </div>
12  <div class="footer">
13    <h2>Footer</h2>
14  </div>
15</div>
 1.grid-container {
 2  display: grid;
 3  grid-template-areas:
 4    'header header header'
 5    'sidebar-left main sidebar-right'
 6    'footer footer footer';
 7  grid-gap: 10px;
 8}
 9
10.header {
11  grid-area: header;
12}
13
14.sidebar-left {
15  grid-area: sidebar-left;
16}
17
18.main {
19  grid-area: main;
20}
21
22.sidebar-right {
23  grid-area: sidebar-right;
24}
25
26.footer {
27  grid-area: footer;
28}

It’s different from the grid-area property, which is used to position individual grid items, either by specifying their row and column positions or by referencing the named areas defined with the grid-template-areas property.

Build a Magazine

This workshop is a fun exercise to create a magazine page and practice the HTML and CSS concepts that we’ve learned so far!