By Konrad Albrecht


2017-08-02 11:32:30 8 Comments

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

1 comments

@Michael_B 2017-08-02 13:03:22

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:

Related Questions

Sponsored Content

19 Answered Questions

[SOLVED] How do CSS triangles work?

3 Answered Questions

[SOLVED] CSS Grid row max height 1fr, scroll content

  • 2017-07-30 00:08:14
  • Joel
  • 5073 View
  • 5 Score
  • 3 Answer
  • Tags:   html css css-grid

5 Answered Questions

[SOLVED] Textarea too large for page?

  • 2016-06-24 07:47:02
  • KennyTan
  • 1227 View
  • 3 Score
  • 5 Answer
  • Tags:   html css

2 Answered Questions

[SOLVED] CSS Grid with an additional wrapper in the middle

1 Answered Questions

[SOLVED] Vertical alignment of elements overlapping in IE

2 Answered Questions

[SOLVED] Invalid css style during zooming in calendar

  • 2016-09-21 13:22:07
  • Krzysztof Michalski
  • 292 View
  • 5 Score
  • 2 Answer
  • Tags:   html css

1 Answered Questions

[SOLVED] CSS - Excess space on the right

  • 2011-05-24 01:05:42
  • Imnotanerd
  • 426 View
  • 9 Score
  • 1 Answer
  • Tags:   iphone css

4 Answered Questions

[SOLVED] Creating a two-column-100% layout with Bootstrap

  • 2012-10-30 10:16:13
  • Kevin D.
  • 2007 View
  • 11 Score
  • 4 Answer
  • Tags:   html css layout web

1 Answered Questions

[SOLVED] How repeat background image in div longer then page length?

  • 2012-06-02 20:50:12
  • Scott Hallauer
  • 7856 View
  • 6 Score
  • 1 Answer
  • Tags:   css html background

4 Answered Questions

[SOLVED] Vertically align content of Bootstrap 3 column

Sponsored Content