CSS Grid - A Deep Dive

Lecture 9: CSS Grid - A Deep Dive

Welcome to the ninth lecture of the "Basic to Brilliance" course. In this lecture, we’ll explore CSS Grid, a powerful layout system that allows you to create complex web layouts with ease. While Flexbox is great for single-dimensional layouts (rows or columns), CSS Grid provides a two-dimensional layout system, enabling you to control both rows and columns simultaneously.

What is CSS Grid?

CSS Grid is a layout system in CSS that enables the creation of flexible, responsive, and grid-based layouts. It allows you to align elements into rows and columns, offering more control over layout structure than Flexbox.

Grid Terminology

Before diving into examples, let’s get familiar with some key terms:

Grid Container: The parent element that contains the grid.
Grid Items: The child elements inside the grid container.
Grid Lines: The horizontal and vertical dividing lines of the grid.
Grid Tracks: The space between two grid lines, forming rows or columns.
Grid Cells: The smallest individual units in the grid formed by the intersection of a row and a column.

1. Basic Grid Structure

To start using Grid, apply display: grid to the container.

Example:

  .grid-container {
    display: grid;
  }

Once display: grid is applied, the child elements of the container become grid items.

2. Defining Grid Columns and Rows

You can define how many rows and columns your grid will have using the grid-template-columns and grid-template-rows properties.

Example: Creating a grid with 3 columns and 2 rows.

  .grid-container {
    display: grid;
    grid-template-columns: 100px 200px 100px;
    grid-template-rows: 50px 150px;
  }

This will create a grid with:

3 columns: The first column is 100px wide, the second is 200px, and the third is 100px.
2 rows: The first row is 50px tall, and the second is 150px.

3. Using Fractional Units (fr)

CSS Grid introduces the fractional unit fr, which represents a fraction of the available space in the grid container. This is a flexible way to allocate space among grid items.

Example: Using fr to divide space equally.

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

In this example, the three columns will have equal widths, each taking one fraction of the available space.

4. Placing Grid Items

You can control where each grid item is placed using the grid-column and grid-row properties. These properties allow you to specify the start and end positions of the items.

Example:

  .grid-item {
    grid-column: 1 / 3; /* This item spans from column 1 to column 3 */
    grid-row: 1 / 2;    /* This item is placed in the first row */
  }

In this case, the grid item will span across the first two columns but will be placed in the first row.

5. Grid Gap

The grid-gap property adds space between grid items, both horizontally and vertically.

Example: Adding gaps between columns and rows.

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

This creates equal 20px gaps between all grid items.

6. Auto-Fit and Auto-Fill

Auto-fit and auto-fill are powerful features that allow the grid to automatically place as many columns as possible, based on the size of the container.

Auto-Fit Example:

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

Here, the grid will automatically fit as many columns as possible, ensuring that each column is at least 100px wide but can grow to fill the available space.

Practical Example: A Simple Grid Layout

Let’s create a simple grid layout with CSS Grid.

HTML:

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
</div>

CSS:

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

.grid-item {
  background-color: #ddd;
  padding: 20px;
  text-align: center;
}

In this example:

The .grid-container has three equal-width columns created using repeat(3, 1fr).
The grid gap is set to 10px to add space between the grid items.
Each .grid-item has padding and background color applied for better visibility.

7. Nested Grids

You can also nest grids, where a grid item becomes a grid container itself. This allows for more complex layouts.

Example:

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

You can apply this concept to create a grid inside another grid for more granular control over your layout.

Responsive Design with CSS Grid

CSS Grid is great for responsive design. You can adjust the number of columns based on the screen size using media queries.

Example: Creating a responsive grid.

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

  @media screen and (max-width: 768px) {
    .grid-container {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media screen and (max-width: 480px) {
    .grid-container {
      grid-template-columns: 1fr;
    }
  }

In this example:

The grid starts with three columns.
On screens smaller than 768px, the grid switches to two columns.
On screens smaller than 480px, the grid collapses to a single column.

Practice Exercise

Create a webpage layout using CSS Grid with a header, main content, sidebar, and footer.
Use grid-template-columns and grid-template-rows to define the grid structure.
Make the layout responsive by adjusting the number of columns on different screen sizes.

Next Up: In the next lecture, we’ll explore Advanced CSS Grid Techniques, including grid areas, template layouts, and combining Grid with Flexbox. Stay tuned!