Named grid lines and grid-template-areas | Layout with CSS Grid

Named grid lines provide a more readable and maintainable way to define the layout of your grid. Instead of using line numbers, you can assign names to specific grid lines and use these names to place items within the grid.

Example:

CSS

.container {

  display: grid;

  grid-template-columns: [header-start] 1fr 1fr [header-end]

                           [main-start] 1fr [main-end]

                           [sidebar-start] 1fr [sidebar-end];

  grid-template-rows: 100px 1fr;

}

In this example, we’ve defined named grid lines for the header and sidebar sections. We can then use these names to place items within the grid:

HTML

<div class=”container”>

  <div class=”header” style=”grid-area: header;”></div>

  <div class=”main” style=”grid-area: main;”></div>

  <div class=”sidebar” style=”grid-area: sidebar;”></div>

</div>

Grid-Template-Areas

The grid-template-areas property allows you to define named grid areas and place items within them using a grid template. This can be helpful for creating complex layouts that require precise control over item placement.

Example:

CSS

.container {

  display: grid;

  grid-template-columns: 1fr 1fr 1fr;

  grid-template-rows: 100px 1fr;

  grid-template-areas:

    “header header header”

    “main main sidebar”;

}

In this example, we’ve defined three grid areas: header, main, and sidebar. We can then use these names to place items within the grid:

HTML

<div class=”container”>

  <div class=”header” style=”grid-area: header;”></div>

  <div class=”main” style=”grid-area: main;”></div>

  <div class=”sidebar” style=”grid-area: sidebar;”></div>

</div>

Benefits of Using Named Grid Lines and Grid-Template-Areas

• Improved readability: Using named grid lines and grid-template-areas can make your CSS code more readable and easier to maintain.
• Flexibility: You can easily rearrange items within the grid by changing their grid area assignments.
• Complex layouts: These techniques are especially useful for creating complex layouts with multiple columns and rows.

By understanding and utilizing named grid lines and grid-template-areas, you can create more flexible and maintainable grid layouts in your responsive web designs.