grid-template-areas with ASCII art is not working

问题

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:

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

来源：https://stackoverflow.com/questions/45459717/grid-template-areas-with-ascii-art-is-not-working

标签

css

css3

css-grid