Grid-template-columns, grid-template-rows, grid-area in CSS

CSS Grid Layout is a powerful tool for creating complex, responsive web layouts. Three important properties that help in defining the structure of a grid are grid-template-columns, grid-template-rows, and grid-area. These properties allow you to control the size and placement of grid items in the container. Let's explore each property in detail with examples.

1. grid-template-columns

The grid-template-columns property defines the size of the columns in a grid container. You can specify column sizes using fixed units (like pixels), percentages, or flexible units like fr.

Example 1: Simple Column Layout

          <style>
            .grid-container {
              display: grid;
              grid-template-columns: 100px 200px 100px;
            }
          </style>
          <div class="grid-container">
            <div>Item 1</div>
            <div>Item 2</div>
            <div>Item 3</div>
          </div>

In this example:

  • The grid has three columns. The first and third columns are fixed at 100px wide, and the second column is fixed at 200px.

Example 2: Using Flexible Columns

          <style>
            .grid-container {
              display: grid;
              grid-template-columns: 1fr 2fr 1fr;
            }
          </style>
          <div class="grid-container">
            <div>Item 1</div>
            <div>Item 2</div>
            <div>Item 3</div>
          </div>

In this example:

  • The first and third columns take up one fraction of the available space each, while the middle column takes up two fractions, making it twice as wide as the others.

2. grid-template-rows

The grid-template-rows property defines the size of the rows in a grid container. Similar to grid-template-columns, it accepts fixed sizes, percentages, or flexible units like fr.

Example 1: Simple Row Layout

          <style>
            .grid-container {
              display: grid;
              grid-template-rows: 150px 200px 100px;
            }
          </style>
          <div class="grid-container">
            <div>Item 1</div>
            <div>Item 2</div>
            <div>Item 3</div>
          </div>

In this example:

  • The grid has three rows. The first row is 150px, the second is 200px, and the third is 100px tall.

Example 2: Using Flexible Rows

          <style>
            .grid-container {
              display: grid;
              grid-template-rows: 1fr 2fr 1fr;
            }
          </style>
          <div class="grid-container">
            <div>Item 1</div>
            <div>Item 2</div>
            <div>Item 3</div>
          </div>

In this example:

  • The rows are flexible. The first and third rows each take one fraction of the available height, while the second row takes two fractions, making it taller than the other two.

3. grid-area

The grid-area property allows you to place a grid item into a specific grid area by specifying the grid lines it should span across. It can take four values: row-start, column-start, row-end, and column-end.

Example 1: Placing Grid Items

          <style>
            .grid-container {
              display: grid;
              grid-template-columns: 1fr 1fr 1fr;
              grid-template-rows: 100px 200px;
            }
            .item1 {
              grid-area: 1 / 1 / 2 / 2;
            }
            .item2 {
              grid-area: 2 / 2 / 3 / 4;
            }
          </style>
          <div class="grid-container">
            <div class="item1">Item 1</div>
            <div class="item2">Item 2</div>
          </div>

In this example:

  • Item 1 spans from row 1, column 1 to row 2, column 2, so it takes up the top-left corner.
  • Item 2 starts at row 2, column 2, and spans from row 2 to 3, and column 2 to 4, making it span two columns.

Example 2: Using grid-area for Complex Layout

          <style>
            .grid-container {
              display: grid;
              grid-template-columns: 1fr 2fr 1fr;
              grid-template-rows: 100px 200px;
            }
            .header {
              grid-area: 1 / 1 / 2 / 4;
            }
            .main-content {
              grid-area: 2 / 1 / 3 / 3;
            }
            .sidebar {
              grid-area: 2 / 3 / 3 / 4;
            }
          </style>
          <div class="grid-container">
            <div class="header">Header</div>
            <div class="main-content">Main Content</div>
            <div class="sidebar">Sidebar</div>
          </div>

In this example:

  • The header spans across all three columns in the first row.
  • The main-content spans the first two columns in the second row.
  • The sidebar takes the third column in the second row.

Conclusion

The properties grid-template-columns, grid-template-rows, and grid-area are key to mastering CSS Grid. By using these properties, you can define the structure and placement of grid items, giving you complete control over your layout. Experiment with different combinations to create flexible, responsive web designs.




Advertisement