Search⌘ K
AI Features
Home
Courses
Learn HTML, CSS, and JavaScript

Grid Naming and Line Placement

Explore how to name grid lines and areas in CSS Grid to enhance code readability and maintainability. Learn to assign grid items using named areas and place items precisely with named grid lines for clearer, more intuitive 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 ...