为什么我的带有ASCII艺术的网格模板区域不起作用? [英] Why aren't my grid-template-areas with ASCII art not working?

问题描述

何时

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

更改为:

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

一切都崩溃了.

如何使用CSS Grid布局实现相同的效果?

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

推荐答案

在

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.命名区域: grid-template-areas 财产

如果命名的网格区域跨越多个网格单元，但是这些单元不形成单个填充矩形，则声明无效.

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

在此模块的未来版本.

9.放置网格项目

每个网格项目都有一个网格区域，即一组矩形的网格单元，网格项占据.

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";

在第二个示例中， header 区域形成非矩形形状.因此该规则无效.

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";

(请注意，句点(.)或一系列相连的句点( ... )构成了 unnamed 网格区域，以上规则不适用(规范参考).

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

幸运的是，Grid提供了多种布局网格项目的方法.

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

代替 grid-template-areas ，您可以使用 基于行的展示位置 .

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 ，请注意， grid-template-areas 的所有字符串值必须具有相同的列数.有关更多详细信息，请参见这篇文章:

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

• 网格区域在CSS网格中的布局不正确

这篇关于为什么我的带有ASCII艺术的网格模板区域不起作用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！