相关疑难解决方法(0)

什么时候

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

改为:

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

一切都崩溃了.

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

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 …

假设我们有一个包含7个项目的新闻条目列表。

我使用CSS Grid创建了一个模式，该模式应在6个项目之后重复出现。

@supports (display: grid)
{
  .list
  {
    display: grid;
    grid-gap: 25px;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto;
    grid-template-areas:
    "bigLeft bigLeft right1 right2"
    "bigLeft bigLeft bigRight bigRight"
    "left1 left2     bigRight bigRight";
  }

  .item:nth-of-type(6n+1)
  {
    grid-area: bigLeft;
  }
  .item:nth-of-type(6n+2)
  {
    grid-area: right1;
  }
  .item:nth-of-type(6n+3)
  {
    grid-area: right2;
  }
  .item:nth-of-type(6n+4)
  {
    grid-area: left1;
  }
  .item:nth-of-type(6n+5)
  {
    grid-area: left2;
  }
  .item:nth-of-type(6n+6)
  {
    grid-area: bigRight;
  }
}

所需grid-template-areas模式：

现在，我希望这种模式重复并重复添加到列表中的更多项。但是在这里您可以看到，一旦添加了第七项，图案就不会继续，而是会被替换。

我也尝试了未命名区域

.item:nth-of-type(6n+1) {
  grid-column: 1 / 3;
  grid-row: 1 / 3; …