Grid Areas

CSS Grid Areas are one of the most intuitive ways to build layouts because they allow you to “draw” your webpage using words instead of just numbers or lines.

Think of it like a map. Instead of telling a friend, “Go to the third street and turn right,” you just label parts of the map “The Park” or “Downtown” and tell them to go there.

1. The Core Concept

To use Grid Areas, you follow a simple two-step process:

1. Name the pieces: Give your HTML elements a nickname.
2. Draw the map: Arrange those nicknames inside your container.

2. Step-by-Step Implementation

Step A: Name your items (grid-area)

First, you go to your CSS items (like your header, sidebar, or footer) and give them a name using the grid-area property.

CSS

.header { grid-area: nav; }
.sidebar { grid-area: side; }
.content { grid-area: main; }
.footer { grid-area: foot; }

Step B: Create the layout (grid-template-areas)

Now, on the parent container, you use grid-template-areas to describe what the layout looks like using those names. You wrap each row in double quotes.

CSS

.container {
  display: grid;
  grid-template-columns: 1fr 3fr; /* Two columns */
  grid-template-rows: auto;
  grid-template-areas: 
    "nav  nav"
    "side main"
    "foot foot";
}

3. Rules of the “Map”

To make sure the browser understands your map, you have to follow a few rules:

• Rectangles Only: Every area must be a perfect square or rectangle. You cannot make “L” shapes or “T” shapes.
• No Gaps: Every cell in your grid must have a name or a placeholder.
• The Dot (.): If you want to leave a grid cell empty, use a period/dot (.).
  • Example: "nav ." would put the nav on the left and leave the right side empty.
• Spelling Matters: The name in grid-template-areas must match the grid-area name exactly.

4. Why use this instead of numbers?

Example: Making it Mobile Responsive

With Grid Areas, changing a layout for mobile is incredibly fast. You don’t have to touch the items; you just change the map on the container:

CSS

/* Mobile: Everything in one column */
@media (max-width: 600px) {
  .container {
    grid-template-areas: 
      "nav"
      "main"
      "side"
      "foot";
  }
}

Summary Checklist

1. Set display: grid; on the parent.
2. Define grid-template-columns so the browser knows how many “slots” are in each row of your map.
3. Assign grid-area: name; to your children.
4. Draw the layout with grid-template-areas: "name name";.

Check out our resources!

• Bootstrap Templates: Explore our Bootstrap Projects section.
• Free E-Books: Download your Free E-Books here.