Webbo3 Frontend Development · Month 1 · Lesson 13

CSS Grid Complete

CSS Grid Complete — a practical Webbo3 Academy lesson with live code examples you can run yourself, plus an exercise to complete tonight.

You currently know how to build simple web pages with HTML and CSS, and you've learned about Flexbox, which helps you create one-dimensional layouts. However, as your projects become more complex, you'll need to create two-dimensional layouts, with rows and columns, to properly arrange your content. You might have tried using Flexbox for this, but it's not the best tool for the job. By the end of this lesson, you'll be able to build a two-dimensional page layout with CSS Grid, which is specifically designed for this purpose. As a beginner, you might be wondering when to use Grid and when to use Flexbox. The truth is, both are powerful layout tools, but they serve different purposes. Flexbox is great for one-dimensional layouts, where you need to arrange items in a row or a column, but it can become cumbersome when dealing with two-dimensional layouts. Grid, on the other hand, is perfect for creating complex, two-dimensional layouts, with multiple rows and columns. By the end of this lesson, you'll know when to use Grid and when to use Flexbox, and you'll be able to build a simple two-dimensional page layout with Grid. By the end of this lesson, you'll be able to create a basic two-dimensional layout with CSS Grid, with multiple rows and columns, and you'll understand the key differences between Grid and Flexbox. You'll learn how to define a grid container, create grid tracks, and place items within the grid. You'll also learn how to use the different Grid properties to control the layout of your items, and how to make your layout responsive. With this knowledge, you'll be able to create more complex and robust layouts for your web pages, and you'll have a better understanding of when to use Grid and when to use Flexbox.

What you need before starting

Everything from the previous lesson, and the project folder you have been building in. Work along in your own editor as you read — this lesson is written to be typed, not skimmed.

How Grid Differs from Flexbox

Grid differs from Flexbox in that Grid is a two-dimensional layout system, allowing for the control of both rows and columns, whereas Flexbox is a one-dimensional layout system, controlling either rows or columns, but not both at the same time.

Gap

What is Gap?

The gap property in CSS Grid is used to specify the size of the gap between grid cells. This can be particularly useful for creating a consistent spacing between elements in a grid layout.

Using Gap

To use the gap property, you can simply add it to your grid container, like so:

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

This will create a grid with three equal columns and a 10px gap between each grid cell.

Repeat, Auto-Fit and Auto-Fill

Repeat()

The repeat() function in CSS Grid is used to repeat a pattern of grid tracks. For example:

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

This will create a grid with three equal columns.

Auto-Fit and Auto-Fill

Auto-fit and auto-fill are two functions that can be used with repeat() to create a dynamic grid layout. Auto-fit will create as many grid tracks as possible, and then expand them to fill the available space. Auto-fill will create as many grid tracks as possible, but will not expand them to fill the available space.

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}

This will create a grid that will fill the available space with as many 100px columns as possible, and then expand them to fill the remaining space.

The Difference that Catches People Out

A common mistake that beginners make when using auto-fit and auto-fill is not specifying a minimum size for the grid tracks. This can cause the grid tracks to become too small, and the content to become unreadable. For example:

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 1fr);
}

This will create a grid with as many equal columns as possible, but the columns may become too small to be readable. To spot this mistake, look for grids with very small columns, and check if a minimum size has been specified for the grid tracks. To fix this mistake, add a minimum size to the grid tracks, like so:

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}

This will ensure that the grid tracks are at least 100px wide, and will prevent the columns from becoming too small.

grid-template-columns and grid-template-rows

Defining Grid Tracks

When working with CSS Grid, you need to define the grid tracks using the grid-template-columns and grid-template-rows properties. These properties are used to specify the number and size of the grid lines. For example, if you want to create a grid with three columns of equal width, you can use grid-template-columns: 1fr 1fr 1fr; The unit fr represents a fractional unit, which divides the available space into equal parts.

Similarly, you can define the grid rows using the grid-template-rows property. For instance, grid-template-rows: 100px 200px; will create a grid with two rows, the first row being 100px high and the second row being 200px high.

Placing Items with grid-column and grid-row

Specifying Grid Cell Positions

To place items within the grid, you can use the grid-column and grid-row properties. These properties are used to specify the grid cell where you want to place an item. For example, grid-column: 1 / 3; will place an item in the first column and span it across two columns (up to the third column). Similarly, grid-row: 2 / 4; will place an item in the second row and span it across two rows (up to the fourth row).

A common mistake beginners make is not understanding the difference between the grid-column and grid-row properties and the grid-template-columns and grid-template-rows properties. The former is used to place items within the grid, while the latter is used to define the grid tracks.

Example Code

  <style>
    .grid-container {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-template-rows: 100px 200px;
      gap: 10px;
    }
    .grid-item1 {
      grid-column: 1 / 2;
      grid-row: 1 / 2;
      background-color: lightblue;
    }
    .grid-item2 {
      grid-column: 2 / 4;
      grid-row: 1 / 3;
      background-color: lightgreen;
    }
  </style>
  <div>
    <div>Item 1</div>
    <div>Item 2</div>
  </div>

In this example, we define a grid container with three columns and two rows. We then place two items within the grid, specifying their positions using the grid-column and grid-row properties. The first item is placed in the first column and first row, while the second item spans across two columns and two rows.

minmax() for Responsive Columns

Creating Flexible Grid Tracks

The minmax() function is used to create flexible grid tracks that can adapt to different screen sizes. It takes two arguments: the minimum size and the maximum size. For example, grid-template-columns: minmax(100px, 1fr); will create a grid column that has a minimum width of 100px and a maximum width of 1fr (which will adapt to the available space).

Avoiding Media Queries

By using the minmax() function, you can create responsive grid columns without the need for media queries. This makes your code more concise and easier to maintain. A common mistake beginners make is overusing media queries, which can lead to complex and hard-to-debug code.

For instance, instead of using a media query to change the grid column width on smaller screens, you can use the minmax() function to create a flexible grid track that adapts to the available space. This approach is more efficient and scalable, especially when working with complex grid layouts.

The fr Unit and Why It Beats Percentages

What is the fr Unit?

The fr unit is a relative unit that represents a fraction of the available space in a grid container. It is used to define the size of grid tracks, which are the rows and columns of a grid. The fr unit is a more flexible and powerful unit than percentages, because it allows you to define the size of grid tracks relative to the available space, rather than relative to the parent element.

For example, if you have a grid container with a width of 800 pixels, and you want to divide it into three columns with equal widths, you can use the fr unit like this: grid-template-columns: 1fr 1fr 1fr;. This will create three columns, each with a width of 266.67 pixels (800 / 3).

Why fr Beats Percentages

Percentages can be problematic when used to define the size of grid tracks, because they are relative to the parent element, rather than the available space. This can lead to unexpected results, especially when the parent element has padding or borders. The fr unit, on the other hand, is relative to the available space, so it is more flexible and easier to use.

A common mistake that beginners make when using percentages is to forget to account for the padding and borders of the parent element. For example, if you have a grid container with a width of 800 pixels, and a padding of 20 pixels, and you use grid-template-columns: 33.33% 33.33% 33.33%; to divide it into three columns, the columns will not have equal widths, because the padding will take up some of the available space.

Named Areas with grid-template-areas

What are Named Areas?

Named areas are a way to define the layout of a grid container using a more readable and maintainable syntax. Instead of using numbers and lines to define the grid, you can use named areas to define the layout of the grid.

For example, you can define a grid container with a header, a main content area, and a footer, like this:

grid-template-areas: 
  "header header"
  "main sidebar"
  "footer footer";

This will create a grid container with three rows and two columns, with the header spanning the top row, the main content area and sidebar spanning the middle row, and the footer spanning the bottom row.

Using Named Areas in a Real Example

Here is an example of how you can use named areas to define the layout of a simple web page:

<style>
  .grid {
    display: grid;
    grid-template-areas: 
      "header header"
      "main sidebar"
      "footer footer";
    grid-template-columns: 1fr 200px;
    grid-template-rows: 100px 1fr 50px;
    height: 600px;
  }
  .header {
    grid-area: header;
    background-color: #ccc;
  }
  .main {
    grid-area: main;
    background-color: #aaa;
  }
  .sidebar {
    grid-area: sidebar;
    background-color: #bbb;
  }
  .footer {
    grid-area: footer;
    background-color: #ccc;
  }
</style>
<div>
  <div>Header</div>
  <div>Main content</div>
  <div>Sidebar</div>
  <div>Footer</div>
</div>

A common mistake that beginners make when using named areas is to forget to define the grid-template-columns and grid-template-rows properties. Without these properties, the grid will not be able to determine the size of the grid tracks, and the layout will not work as expected.

Choosing Grid or Flexbox for a Given Job

When to Use Grid

Grid is a two-dimensional layout system, which means it is well-suited for layouts that require both rows and columns. It is also well-suited for layouts that require a high degree of precision and control, such as complex magazine layouts or dashboards.

For example, if you need to create a layout with multiple rows and columns, and you need to be able to control the size and position of each element precisely, then Grid is a good choice.

When to Use Flexbox

Flexbox is a one-dimensional layout system, which means it is well-suited for layouts that require only one row or one column. It is also well-suited for layouts that require a high degree of flexibility and adaptability, such as responsive web design.

For example, if you need to create a layout with a single row or column, and you need to be able to adapt the layout to different screen sizes and devices, then Flexbox is a good choice.

A common mistake that beginners make when choosing between Grid and Flexbox is to use Grid for simple layouts that only require one row or one column. This can result in overly complex code and a layout that is harder to maintain than it needs to be. Instead, use Flexbox for simple layouts and reserve Grid for more complex layouts that require multiple rows and columns.

Do this now

To get hands-on practice with CSS Grid, we'll build a classic page layout and a card gallery. This exercise should take about 45 minutes to an hour to complete, depending on your pace.

1. Create a new HTML file named index.html and add basic HTML structure, including a header, sidebar, main content area, and footer.
2. Link an external CSS stylesheet named styles.css to your HTML file.
3. In your CSS file, define a grid container and use grid-template-areas to create a layout with the areas header, sidebar, main, and footer.
4. Use the grid-area property to assign each HTML element to its corresponding grid area.
5. Create a new HTML section for a card gallery and add several card elements.
6. In your CSS, define a grid container for the card gallery and use grid-template-columns with repeat, auto-fit, and minmax to create a responsive grid.

Take your time to understand each step and don't hesitate to refer back to the lesson material if you need a refresher.

How to know you got it right

Verify your work by checking the following:

• Your page layout has a clear header, sidebar, main content area, and footer, and they are correctly positioned using grid-template-areas.
• Your card gallery is responsive and the cards wrap to the next line when the screen size changes.
• The cards in the gallery have a consistent size and margin, thanks to the use of minmax and auto-fit.

Common mistakes

• Forgetting to define grid columns and rows: This looks like a grid that doesn't resize or align properly. It happens because the grid container needs explicit column and row definitions to work correctly. The fix is to add grid-template-columns and grid-template-rows properties to the grid container.
• Confusing grid areas with grid cells: This looks like misplaced or overlapping content. It happens because beginners misunderstand the difference between grid areas (which can span multiple cells) and individual grid cells. The fix is to use grid-area property to define areas and grid-column and grid-row properties to place items in specific cells.
• Not using fr units for flexible grid tracks: This looks like grids that don't adapt well to different screen sizes. It happens because beginners use fixed units like px instead of flexible units like fr. The fix is to use fr units to define grid tracks that can adapt to available space.
• Overriding grid styles with other layout properties: This looks like grids that don't behave as expected. It happens because beginners apply other layout properties (like float or position) that override grid styles. The fix is to remove or adjust these properties to allow grid styles to take effect.

Questions students ask

• What is the difference between grid and flexbox? Grid is for two-dimensional layouts, while flexbox is for one-dimensional layouts, either rows or columns.
• How do I make my grid responsive? Use fr units, minmax function, and media queries to create a responsive grid that adapts to different screen sizes.
• Can I nest grids inside each other? Yes, you can create nested grids by applying display: grid to a grid item, allowing you to create complex layouts with multiple levels of grid structure.

Next lesson: Responsive Design That Actually Works.