如何使用 css 网格将不同大小的元素整齐地组合在一起？

Question

我正在尝试使用 css 创建一个网格。第一个元素具有固定高度，这导致整个第一行具有相同的高度。我希望第二行中的元素向上推并填充第一行中的空白区域。有没有办法用 css grid 实现这个？

我打算使用它的页面将包含根据用户提交的内容而改变大小的元素。

我试过使用 grid-auto-columns 和 grid-auto-rows 以及 grid-auto-flow: dense;但我无法获得这些的任何组合来获得所需的结果。任何建议表示赞赏。

.container {
  display: grid;
  width: 800px;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-gap: 1rem;
}


/* OTHER STYLES */

body {
  background-color: #3b404e;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.item {
  height: 100px;
  background-color: #1EAAFC;
  background-image: linear-gradient(130deg, #6C52D9 0%, #1EAAFC 85%, #3EDFD7 100%);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  color: #fff;
  border-radius: 4px;
  border: 6px solid #171717;
}

.item1 {
  height: 250px;
}

<div class="container">
  <div class="item item1"></div>
  <div class="item item2"></div>
  <div class="item item3"></div>
  <div class="item item4"></div>
  <div class="item item5"></div>
</div>

这是我正在练习的代码笔： codepen

Answer 1

第一件事你不能只有 2 行。网格给出了一个结构。

有 3 行，这是可能的

.container {
  display: grid;
  width: 800px;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-gap: 1rem;
}


/* OTHER STYLES */

body {
  background-color: #3b404e;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.item {
  height: 100px;
  background-color: #1EAAFC;
  background-image: linear-gradient(130deg, #6C52D9 0%, #1EAAFC 85%, #3EDFD7 100%);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  color: #fff;
  border-radius: 4px;
  border: 6px solid #171717;
}

.item1 {
  height: 250px;
  grid-area: 1 / 1 / 3 / 2;
}

.item2 {
  grid-area: 3 / 1 / 4 / 2;
}

.item3 {
  grid-area: 1 / 2 / 2 / 3;
}

.item4 {
  grid-area: 1 / 3 / 2 / 4;
}

.item5 {
  height: 250px;
  grid-area: 2 / 2 / 4 / 3;
}

.item6 {
  height: 250px;
  grid-area: 2 / 3 / 4 / 4;
}

<div class="container">
  <div class="item item1"></div>
  <div class="item item2"></div>
  <div class="item item3"></div>
  <div class="item item4"></div>
  <div class="item item5"></div>
  <div class="item item6"></div>
</div>

这是使用每个项目的网格区域位置的一种方法

也可以对 span 做同样的事情

Answer 2

这就像添加一样简单：

.primary {
  grid-row: span 2;
}

虽然显然我选择将 CSS 类添加到您想要获得焦点的元素，但为了这样做：

.container {
  display: grid;
  width: 800px;
  grid-template-columns: repeat(3, 1fr);

  grid-template-rows: repeat(2, 1fr);
  grid-gap: 1rem;
}


/* OTHER STYLES */

body {
  background-color: #3b404e;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.item {
  height: 100px;
  background-color: #1EAAFC;
  background-image: linear-gradient(130deg, #6C52D9 0%, #1EAAFC 85%, #3EDFD7 100%);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  color: #fff;
  border-radius: 4px;
  border: 6px solid #171717;
}

.item1 {
  height: 250px;
}

.primary {
  /* this causes the .primary element(s) to expand across
     two of the grid-row tracks: */
  grid-row: span 2;
}

<div class="container">
  <div class="item item1 primary"></div>
  <div class="item item2"></div>
  <div class="item item3"></div>
  <div class="item item4"></div>
  <div class="item item5"></div>
</div>

JS Fiddle demo。

当然，可以在不添加类名并简单地指定 :nth-child() 元素的情况下实现上述目标：

/* or .container > div:first-child: */
.container > div:nth-child(1) {
  grid-row: span 2;
}

.container {
  display: grid;
  width: 800px;
  grid-template-columns: repeat(3, 1fr);

  grid-template-rows: repeat(2, 1fr);
  grid-gap: 1rem;
}


/* OTHER STYLES */

body {
  background-color: #3b404e;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.item {
  height: 100px;
  background-color: #1EAAFC;
  background-image: linear-gradient(130deg, #6C52D9 0%, #1EAAFC 85%, #3EDFD7 100%);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  color: #fff;
  border-radius: 4px;
  border: 6px solid #171717;
}

.item1 {
  height: 250px;
}

/* or .container > div:first-child: */
.container > div:nth-child(1) {
  grid-row: span 2;
}

<div class="container">
  <div class="item item1 primary"></div>
  <div class="item item2"></div>
  <div class="item item3"></div>
  <div class="item item4"></div>
  <div class="item item5"></div>
</div>

JS Fiddle demo。

参考：

• grid-row。