Defining Grid Columns and Rows in CSS

CSS Grid is a powerful layout system that allows for precise control over the placement of items in both rows and columns. To make use of this layout, we can define the grid columns and rows in a container using the grid-template-columns and grid-template-rows properties. This article will explain how to define grid columns and rows in CSS and provide examples to illustrate the concepts.

1. What Are Grid Columns and Rows?

Grid columns and rows form the foundation of the CSS Grid layout. The grid-template-columns property defines the width of the columns, while the grid-template-rows property defines the height of the rows. Both properties accept values in different units, including pixels (px), percentages (%), and flexible units like fr (fractional units).

2. Defining Columns with grid-template-columns

To define the number of columns and their width, you use the grid-template-columns property. This property specifies how many columns your grid will have and what size each column will be. You can use any valid length unit, but fractional units (fr) are commonly used to create flexible layouts.

Example 1: Defining Columns

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

In this example:

  • The grid container has three columns, each taking up an equal portion of the available space.
  • The 1fr unit means "one fraction" of the available space. So, all three columns will share the space equally.

Example 2: Defining Columns with Different Sizes

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

In this example:

  • The first column is 200px wide, the second column is 300px wide, and the third column takes up the remaining available space using 1fr.

3. Defining Rows with grid-template-rows

Just like columns, you can define the number of rows and their height using the grid-template-rows property. This property allows you to control how much space each row occupies. You can use fixed units like pixels, flexible units like fr, or even percentages for row heights.

Example 1: Defining Rows

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

In this example:

  • The first row is 100px tall, and the second row is 200px tall.
  • There are two rows defined, and any additional items will be placed into these rows automatically.

Example 2: Using fr for 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 first and third rows each take up one fraction of the available height, while the second row takes up two fractions of the available height.
  • The rows will adapt their height based on the available space in the container.

4. Combining Rows and Columns

You can combine both grid-template-columns and grid-template-rows to create a full grid layout. This allows you to define both the columns and rows simultaneously and control how your grid items are arranged.

Example: Full Grid Layout

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

In this example:

  • The grid has three columns with widths: 1fr, 2fr, and 1fr.
  • The grid has three rows with heights: 100px, 200px, and 150px.
  • The items will automatically be placed into the grid based on the defined columns and rows.

5. Conclusion

Defining grid columns and rows in CSS is a fundamental part of working with CSS Grid. By using grid-template-columns and grid-template-rows, you can create flexible, responsive layouts that adapt to different screen sizes. Whether you're building a simple layout or a complex grid structure, understanding how to define and manipulate rows and columns is essential for creating well-organized, dynamic web pages.




Advertisement