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>

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>

Answer 2

CSS 更改： 消除所有 CSS 代码（在您的问题中）并用它替换它。使用 grid-template-columns: 1fr repeat(3, 170px) 1fr; 会搞砸事情，因为它不能代表两行框。使用grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); 允许浏览器/系统确定该特定行的实际位置。 而且它可以让每一行做自己的事。使用place-items: end center; 表示您希望所有内容居中，但您希望系统从末尾开始然后居中。这可以防止东西被卡在最左边。注意：您不需要任何其他 CSS 即可获得所需的效果。只是 .content 和 .box 类。没有别的了。

.content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    place-items: end center;
}

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

HTML 更改： 用（下面）替换您的html。这会将盒子分成两行。我用.content 包裹每一行，以便它们可以包含不同数量的框而不会出现问题。

<div class="content">
  <div class="box">1</div>
   <div class="box">2</div>
  <div class="box">3</div>
</div>

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

希望我的解释能帮助您更好地理解 CSS 网格布局。 :)

Answer 3

您可以使用grid-template-columns: repeat(12, 1fr) 创建一个12 列网格：

1. 将第一行的列跨度调整为4，第二行调整为3。

2. 使用justify-items: center 将容器对齐到中心以获得中心对齐。

3. 现在您可以调整 spans 或使用justify-self 进行所需的布局。

请看下面的演示：

.content {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: 10px;
  justify-items: center;
}

.content .box {
  height: 170px;
  width: 170px;
  border: solid 1px #000;
}
.box:nth-child(1), .box:nth-child(2), .box:nth-child(3) { /* first three boxes */
  grid-column: span 4;
}
.box:nth-child(3) ~ .box { /* the last 4 boxes */
  grid-column: span 3;
}
/* alignment adjustment if needed */
.box:nth-child(1) {
  justify-self: flex-end;
}
/* alignment adjustment if needed */
.box:nth-child(3) {
  justify-self: flex-start;
}

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

框中带有图像的演示：

.content {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: 10px;
  justify-items: center;
}

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

.box img {
  display: block;
  width: 100%;
}

.box:nth-child(1), .box:nth-child(2), .box:nth-child(3) { /* first three boxes */
  grid-column: span 4;
}
.box:nth-child(3) ~ .box { /* the last 4 boxes */
  grid-column: span 3;
}
/* alignment adjustment if needed */
.box:nth-child(1) {
  justify-self: flex-end;
}
/* alignment adjustment if needed */
.box:nth-child(3) {
  justify-self: flex-start;
}

<div class="content">
  <div class="box">
    <img src="https://via.placeholder.com/150" />
  </div>
  <div class="box">
    <img src="https://via.placeholder.com/150" />
  </div>
  <div class="box">
    <img src="https://via.placeholder.com/150" />
  </div>
  <div class="box">
    <img src="https://via.placeholder.com/150" />
  </div>
  <div class="box">
    <img src="https://via.placeholder.com/150" />
  </div>
  <div class="box">
    <img src="https://via.placeholder.com/150" />
  </div>
  <div class="box">
    <img src="https://via.placeholder.com/150" />
  </div>
</div>