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

1. Create a webpage layout using CSS Grid with a header, main content, sidebar, and footer.
2. Use grid-template-columns and grid-template-rows to define the grid structure.
3. 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!

---

Follow Me on LinkedIn-

Ridoy Hasan

The above is the detailed content of CSS Grid - A Deep Dive. For more information, please follow other related articles on the PHP Chinese website!