Learn HTML, CSS, and JavaScript/

...

/

Grid Naming and Line Placement

Grid Naming and Line Placement

Learn grid naming and line placement in CSS for precise and readable layouts.

We'll cover the following...

In this lesson, we’ll look at naming grid lines and areas to enhance the readability and maintainability of our CSS Grid layouts. We’ll explore how to use named grid areas and lines, and how to place grid items using these names for more intuitive code.

Naming grid areas with grid-template-areas

By defining grid areas, we can assign names to specific sections of the grid, making placement of items more straightforward.

.grid-container {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";
  grid-template-columns: 1fr 3fr;
  grid-template-rows: auto 1fr auto;
  gap: 10px;
}
Defining named grid areas

In the above code:

  • Line 3: We define the grid layout and name the areas.

  • Line 4: The header area is defined to occupy both the available columns.

  • Line 5: The ...