水平显示网格中心子元素

Question

我确定之前已经回答过这个问题，但我似乎无法让它工作。我正在尝试使用 display:grid 父级水平居中网格项目。我有一个 12 列的网格（全屏时 76px 列/56px 间隙），具有各种列宽子元素（对于这个例子，我将只使用 span 8 1000px）。

.main-container{
  max-width:1528px;
  margin: 0 auto;
}

.parent{
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-column-gap: 56px;
  justify-items: center;
}

.grid-8{
  grid-column: span 8;
  background: red;
  opacity: 0.6;
  width: 100%;
}

<div class="main-container">
  <div class="parent">
    <div class="grid-8">8</div>
  </div>
</div>

此外，一旦子元素居中，它是否可以保持其宽度 (1000px) 直到 .main-container 开始接触任一侧？一旦浏览器开始变小（水平）。对不起，这对我来说解释我的意思有点棘手。 .main-container 如果浏览器 window 被拉入所以这是 1200px 宽 span 8 列将不再是 1000px 宽它会缩小（我猜是因为它是相对的到主容器大小）。但理想情况下，我希望它保持 1000px，直到 .main-container 命中它然后 span 8 可以开始减少宽度。

谢谢

Answer 1

您无法使用 justify/align 属性自动对齐 grid 中的项目。

您可以尝试对每个子节点使用 grid-column-end: -N; 语法，但这不是最好的方法。

使用 flex 更好 - 在这种情况下，您可以根据需要对齐子节点。

无论如何，如果你想继续使用网格，你可以做这样的事情（比如一个选项）：

.main-container {
  max-width: 1528px;
  margin: 0 auto;
}

.parent {
  --columns-amount: 12;
  display: grid;
  /*grid-template-columns: repeat(12, minmax(0, 1fr));*/
  grid-template-columns: repeat(var(--columns-amount), 1fr);
  grid-column-gap: 56px;
  /*justify-items: center;*/
}

.grid-8 {
  /* edit --column-size to see changes */
  --column-size: 8;
  grid-column: calc((var(--columns-amount) - var(--column-size)) / 2 + 1) / span var(--column-size);
  background: red;
  opacity: 0.6;
  /*width: 100%;*/
}


/* flex */

.parent--flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.parent--flex>.grid-8 {
  flex: 0 0 auto;
  width: 66.66667%;
}

<div class="main-container">
  <div class="parent">
    <div class="grid-8">Grid</div>
  </div>
</div>

<hr />

<div class="main-container">
  <div class="parent--flex">
    <div class="grid-8">Flex</div>
  </div>
</div>

水平显示网格中心子元素

Display grid center child elements horizontally

css

css-grid