Why is my grid-template-areas with ASCII art not working?

Question

When

grid-template-areas:
       "....... header  header"
       "sidebar content content";

is changed to:

grid-template-areas:
       "....... header  header"
       "sidebar header content";

Everything falls apart.

How can I achieve the same effect with CSS Grid layout?

body {
  margin: 40px;
}

.sidebar {
  grid-area: sidebar;
}

.content {
  grid-area: content;
}

.header {
  grid-area: header;
}

.wrapper {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 120px 120px 120px;
  grid-template-areas: "....... header  header" "sidebar content content";
  background-color: #fff;
  color: #444;
}

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
}

.header {
  background-color: #999;
}

<div class="wrapper">
  <div class="box header">Header</div>
  <div class="box sidebar">Sidebar</div>
  <div class="box content">Content</div>
</div>

https://codepen.io/rachelandrew/pen/oXKgoQ

Templar

Answer 1

When it comes to using ASCII art with the grid-template-areas property, there is an important limitation currently in place: Named grid areas must be rectangular.

In other words, tetris-shaped grid areas of the same name are not allowed.

This behavior is defined in two parts of the spec.

7.3. Named Areas: the grid-template-areas property

If a named grid area spans multiple grid cells, but those cells do not form a single filled-in rectangle, the declaration is invalid.

Non-rectangular or disconnected regions may be permitted in a future version of this module.

9. Placing Grid Items

Every grid item has a grid area, a rectangular set of grid cells that the grid item occupies.

In your first example, all grid areas form rectangles. So the rule is valid.

grid-template-areas:
       "....... header  header"
       "sidebar content content";

In your second example, the header area forms a non-rectangular shape. So the rule is invalid.

grid-template-areas:
       "....... header  header"
       "sidebar header content";

(Note that a period (.) or series of connected periods (...) form an unnamed grid area, to which the rule above does not apply (spec reference).)

---

Fortunately, Grid provides multiple methods for laying out grid items.

Instead of grid-template-areas, you can use line-based placement.

.wrapper {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 120px 120px 120px;
  grid-auto-rows: 100px;
  background-color: #fff;
  color: #444;
}

.header {
  grid-column: 2 / 4;
  grid-row: 1 / 3;
}

.sidebar {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}

.content {
  grid-column: 3 / 4;
  grid-row: 2 / 3;
}

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
}

.header {
  background-color: #999;
}

body {
  margin: 40px;
}

<div class="wrapper">
  <div class="box header">Header</div>
  <div class="box sidebar">Sidebar</div>
  <div class="box content">Content</div>
</div>

---

ALSO, note that all string values of grid-template-areas must have the same number of columns. See this post for more details:

• Grid areas not laying out properly in CSS Grid

Squash

This specific problem is fully answered by this answer. But for anyone setting only rectangle areas and still says invalid property for grid-area, be sure to check that you didn't add any quotes to the value. So grid-area: heading; will be ok, but grid-area: "heading"; will give you invalid property. – Supposal

@zoltankundi, Yup. That issue is covered in detail in this post: Why are CSS named grid areas not in quotes? – Squash

Answer 2

In grid template areas there are few rules you need to know in order to understand why it's not working.

1. Every cells need to be covered means that every cells in the grid should be assigned to a name. Even if it is empty like this:

"....... header header".

2. You can use the same name in adjacent rows and column. Like this ::
   "....... header header" "sidebar content content";

here we can clearly see that header is used twice but they are used in adjacent column. And also content is used twice which is also in adjacent column. You can use it for row too but it should be adjacent.

but you can't use the same name when it is not adjacent. like this:

"....... header header" "sidebar header content";

3. It should be in rectangle shape. This means the columns inside the grid for each row should be same.

Equalizer