CSS Grid Basics

CSS Grid is a powerful layout system in CSS that allows you to create complex web layouts using a grid of rows and columns. It provides a more robust and flexible way to design two-dimensional layouts compared to Flexbox, which is more focused on one-dimensional layouts. With Grid, you can control both the structure and the placement of elements in both directions (rows and columns) simultaneously.

1. Defining Rows and Columns

In CSS Grid, you define the structure of your grid container using rows and columns, and then place the grid items within the defined grid. Here’s how to define rows and columns:

a. Creating a Basic Grid Layout

To create a grid layout, you first need to define the grid container. This is done by setting the container’s display property to grid.

.container {
  display: grid;
}

Once the container is set to grid, you can define the number of rows and columns it should have.

b. Defining Rows and Columns with grid-template-rows and grid-template-columns

You can use grid-template-rows to define the rows and grid-template-columns to define the columns in your grid. The values can be fixed sizes (e.g., px, em) or flexible sizes (e.g., fr, auto, %).

• grid-template-rows defines the number of rows and their height.
• grid-template-columns defines the number of columns and their width.

Example:

.container {
  display: grid;
  grid-template-rows: 100px 200px; /* 2 rows with heights 100px and 200px */
  grid-template-columns: 1fr 2fr;   /* 2 columns: first is 1 fraction, second is 2 fractions */
}

In this example:

• There are 2 rows, with the first row being 100px high and the second 200px high.
• There are 2 columns, with the first column taking up 1 fraction of the available space and the second column taking up 2 fractions.

2. Grid Properties: grid-template-rows and grid-template-columns

a. grid-template-rows

This property defines the size of the rows in your grid. You can specify any valid length units, including pixels (px), percentages (%), or flexible units like fr (fraction of available space).

Example:

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

In this example, the grid will have 3 rows with the following heights:

• 150px for the first row,
• 100px for the second row,
• 200px for the third row.

b. grid-template-columns

This property defines the size of the columns in your grid. Like grid-template-rows, you can use different units to define the column sizes.

Example:

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

In this example:

• The first column will be 100px wide.
• The second column will take up remaining space (auto).
• The third column will take up one fraction of the available space (1fr).

3. Fractional Units (fr)

The fr unit is one of the most powerful features of CSS Grid. It represents a fraction of the available space in the grid container. It allows the grid to be responsive by distributing the space among grid items based on their specified fraction values.

For example:

.container {
  display: grid;
  grid-template-columns: 1fr 3fr; /* First column takes up 1 part, second takes up 3 parts */
}

In this example, the available space in the container will be divided into 4 parts (1 + 3). The first column will take 1 part, and the second column will take 3 parts.

4. Using grid-template-areas (Optional)

You can also use grid-template-areas to define areas within your grid by giving each row and column a name. This method can simplify the visual arrangement of the grid.

Example:

.container {
  display: grid;
  grid-template-rows: 200px 100px;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "header header"
    "main sidebar";
}

In this case:

• The header spans both columns.
• The main section is in the first column, and the sidebar is in the second column.

You can then place grid items into these named areas like so:

.header {
  grid-area: header;
}

.main {
  grid-area: main;
}

.sidebar {
  grid-area: sidebar;
}

5. Example: Basic Grid Layout

Let’s look at a full example of creating a simple 2×2 grid with different content in each cell.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Grid Example</title>
  <style>
    .container {
      display: grid;
      grid-template-rows: 200px 200px;
      grid-template-columns: 1fr 1fr;
      gap: 10px; /* Space between items */
      padding: 20px;
    }

    .item {
      background-color: lightcoral;
      padding: 20px;
      text-align: center;
    }

    .item1 {
      background-color: lightblue;
    }

    .item2 {
      background-color: lightgreen;
    }

    .item3 {
      background-color: lightyellow;
    }

    .item4 {
      background-color: lightpink;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item item1">Item 1</div>
    <div class="item item2">Item 2</div>
    <div class="item item3">Item 3</div>
    <div class="item item4">Item 4</div>
  </div>
</body>
</html>

In this example:

• There are 4 items arranged in a 2×2 grid.
• The grid-template-rows is set to 200px 200px (2 rows of 200px each).
• The grid-template-columns is set to 1fr 1fr (2 equal columns).
• The gap property adds 10px space between the grid items.

6. Conclusion

CSS Grid is a powerful layout system that allows for flexible and complex web layouts. By defining rows and columns using grid-template-rows and grid-template-columns, you can easily control the structure of your web pages. With fractional units (fr), you can create layouts that are responsive and adapt to various screen sizes. Practice using these properties and create various grid layouts to fully grasp the flexibility of CSS Grid.