水平显示网格中心子元素

Question

我相信这件事以前已经回答过了，但我似乎无法使它起作用。我正试图用一个display:grid父元素水平地对网格项进行居中。我有一个12列网格(76 12列/56 12全屏幕间隙)，其中包含各种列宽度子元素(在本例中，我只使用span 8 1000 12)。

​

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

​

而且，一旦子元素以中心为中心，它是否有可能保持其宽度(1000 to )直到.main-container开始接触任何一方？一旦浏览器开始被拉小(水平)。抱歉，我要解释一下我的意思有点棘手。如果将浏览器窗口拉入，那么这是1200‘m宽，span 8列将不再是1000’m宽，它将缩小(我猜是因为它相对于主容器大小)。但理想情况下，我希望它保持1000 in，直到..main容器到达它，然后span 8就可以开始减小宽度了。

谢谢

Answer 1

不能将网格中的项自动与对齐/对齐道具。

您可以尝试对每个子节点使用网格列结束：-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>

​