html - Css Grid：将2行中不同数量的项目居中对齐

Question

我必须将 7 divs（图像）放在两行中，第一行 3 个，第二行 4 个。顶部 3 divs 应该居中，底部 4 可以占据所有空间。

这是我所做的：

.content {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 1fr repeat(3, 170px) 1fr;
  grid-template-areas: ". item1 item2 item3 ."
                       "item4 item5 item6 item7";
  grid-template-rows: 1fr 1fr;
}

.content .box {
   width: 170px;
   height: 170px;
   border: solid 1px #000;
}

.content.box:nth-child(1) {
  grid-area: box1;
}

.content.box:nth-child(2) {
  grid-area: box2;
}

.content.box:nth-child(3) {
  grid-area: box3;
}

.content.box:nth-child(4) {
  grid-area: box4;
}

.content.box:nth-child(5) {
  grid-area: box5;
}

.content.box:nth-child(6) {
  grid-area: box6;
}

.content.box:nth-child(7) {
  grid-area: box7;
}

<div class="content">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
  <div class="box">7</div>
</div>

标签： htmlcssalignmentcss-grid

Answer 1

网格，顾名思义，必须成形为网格。这意味着列数必须是所有行的空间。

因此，浏览器不接受您的区域样式，因为它的第一行有 5 列，第二行有 4 列。

@kukkuz 已经发布了更正此问题的答案。在这里，您有另一种可能性，在我的观点中更适合您的要求。

无论如何，这种布局的最佳解决方案可能是使用 flex （因为布局不是真正的网格）

.content {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(8, 100px);
  grid-template-areas: "empt box1 box1 box2 box2 box3 box3 emp2"
                       "box4 box4 box5 box5 box6 box6 box7 box7";
  grid-template-rows: 1fr 1fr;
}

.content .box {
   width: 180px;
   height: 170px;
   border: solid 1px #000;
}

.content .box:nth-child(1) {
  grid-area: box1;
}

.content .box:nth-child(2) {
  grid-area: box2;
}

.content .box:nth-child(3) {
  grid-area: box3;
}

.content .box:nth-child(4) {
  grid-area: box4;
}

.content .box:nth-child(5) {
  grid-area: box5;
}

.content .box:nth-child(6) {
  grid-area: box6;
}

.content .box:nth-child(7) {
  grid-area: box7;
}

<div class="content">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
  <div class="box">7</div>
</div>