背景和包装的CSS网格问题答案

【问题标题】：css grid problem with background and wrapping背景和包装的CSS网格问题
【发布时间】：2019-08-14 00:40:10
【问题描述】：

我有一个网格，我希望它的工作方式有点像它，除了只有 1 或 2 个单元格时，我希望它自动调整大小，而不是一组 3 个，最后一个保持其单元格空间。当我将 repeat(3, 100px) 值设置为自动调整时，它会终止列布局。我仍然需要它在 3 点结束。

.parent {
  background: #f4f4f5;
  font-size:2em;
  border: 1px solid black;
  padding: 20px 0;
  text-align: center;
  width: 100%;
}
.parent .wrapper {
  display: inline-grid;
  grid-template-columns: repeat(3, 100px);
  box-shadow: 1px 0px 5px 0px rgba(0,0,0,0.75);
  grid-auto-flow: row;
  background-color: white;
}

.cell {
  border: 1px solid gray;
  background-color: white;
}

.cell .inner {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 100px;
  text-align: center;
}

<div class="parent">
  <div class="wrapper">
    <div class="cell">
      <div class="inner">Cell 1</div>
    </div>
    <div class="cell">
      <div class="inner">Cell 2</div>
    </div>
    <div class="cell">
      <div class="inner">Cell 3</div>
    </div>
    <div class="cell">
      <div class="inner">Cell 4</div>
    </div>
  </div> 
</div>

【问题讨论】：

除非你想使用 JS，否则我认为媒体查询是你最好的选择。理想情况下，quantity queries 会提供简单的解决方法，但目前还只是一个概念。
也许我没听懂你的意思，但为什么不grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)) 并在wrapper 上设置width: 300px？
然后列将扩展以填充容器的 300px 宽度。它们不会是 300 像素。 jsfiddle.net/qxa0ts95/1

标签： html css css-grid

【解决方案1】：

因此，您希望 grid-container 自动调整小于 3 个项目的大小并在此之后换行 - 这是一个使用 隐式网格 的解决方案。

使用单列内联网格容器：

display: inline-grid;
grid-template-columns: 100px;
grid-template-rows: 100px;

将您的 隐式网格 大小设置为 100px x 100px，使用：
```
grid-auto-columns: 100px;
grid-auto-rows: 100px;
```
使用grid-column: 2将您的第二项放到第二行；和你的第三个项目到第三行使用grid-column: 3

现在您将拥有一个 3 x 3 的网格 - 请参阅下面的演示：

* {
  box-sizing: border-box;
}

.parent {
  background: #f4f4f5;
  font-size: 2em;
  border: 1px solid black;
  padding: 20px 0;
  text-align: center;
  width: 100%;
}

.parent .wrapper {
  display: inline-grid;
  grid-template-columns: 100px; /* one column layout */
  grid-template-rows: 100px; /* sizes the rows */
  grid-auto-columns: 100px; /* sizing columns of implicit grid */
  grid-auto-rows: 100px; /* sizing rows of implicit grid */
  box-shadow: 1px 0px 5px 0px rgba(0, 0, 0, 0.75);
  grid-auto-flow: row;
  background-color: white;
}

.cell:nth-child(2) {
  grid-column: 2; /* places it in the second column */
}

.cell:nth-child(3) { 
  grid-column: 3; /* places it in the third column */
}

.cell {
  border: 1px solid gray;
  background-color: white;
}

.cell .inner {
  display: flex;
  justify-content: center;
  align-items: center;
  /* width: 100px; */
  /* height: 100px; */
  height: 100%; /* added */
  text-align: center;
}

<div class="parent">
  <div class="wrapper">
    <div class="cell">
      <div class="inner">Cell 1</div>
    </div>
  </div>
</div>

<div class="parent">
  <div class="wrapper">
    <div class="cell">
      <div class="inner">Cell 1</div>
    </div>
    <div class="cell">
      <div class="inner">Cell 2</div>
    </div>
  </div>
</div>

<div class="parent">
  <div class="wrapper">
    <div class="cell">
      <div class="inner">Cell 1</div>
    </div>
    <div class="cell">
      <div class="inner">Cell 2</div>
    </div>
    <div class="cell">
      <div class="inner">Cell 3</div>
    </div>
  </div>
</div>

<div class="parent">
  <div class="wrapper">
    <div class="cell">
      <div class="inner">Cell 1</div>
    </div>
    <div class="cell">
      <div class="inner">Cell 2</div>
    </div>
    <div class="cell">
      <div class="inner">Cell 3</div>
    </div>
    <div class="cell">
      <div class="inner">Cell 4</div>
    </div>
  </div>
</div>

<div class="parent">
  <div class="wrapper">
    <div class="cell">
      <div class="inner">Cell 1</div>
    </div>
    <div class="cell">
      <div class="inner">Cell 2</div>
    </div>
    <div class="cell">
      <div class="inner">Cell 3</div>
    </div>
    <div class="cell">
      <div class="inner">Cell 4</div>
    </div>
    <div class="cell">
      <div class="inner">Cell 5</div>
    </div>
    <div class="cell">
      <div class="inner">Cell 6</div>
    </div>
    <div class="cell">
      <div class="inner">Cell 7</div>
    </div>
    <div class="cell">
      <div class="inner">Cell 8</div>
    </div>
    <div class="cell">
      <div class="inner">Cell 9</div>
    </div>
    <div class="cell">
      <div class="inner">Cell 10</div>
    </div>
  </div>
</div>

【讨论】：