Question

我正在构建网格布局，我需要一些帮助。这是要求的描述。

网格中的每个单元格都有一个最小的固定大小（120px）。
总是会有偶数个单元格。

我希望网格填满所有空白。

我当前的实现适用于较小的容器，但是行溢出不适用于较大的容器。

for (let index = 0; index < 500; index++) {
  wkhtmltopdf = spawn('/usr/local/bin/wkhtmltopdf', ['--margin-left', '0', `${index}.html`, `${index}.pdf`])

  wkhtmltopdf.stdout.on('data', (data) => {
    console.log(`stdout: ${data}`)
  })

  wkhtmltopdf.stderr.on('data', (data) => {
    console.log(`stderr: ${data}`)
  })

  wkhtmltopdf.on('close', (code) => {
    console.log(`child process exited with code ${code}`)
  })
}

这给了我一个网格，第一行有4个单元格，第二行有2个单元格。我需要每行3个单元格来填充所有空白区域。

我宁愿不增加// Cells cannot be smaller than this value. $minimum-cell-width: 120px; .container{ display: grid; grid-template-columns: repeat(auto-fit, minmax($minimum-cell-width, 1fr)); width: 600px; }变量（尽管确实可以解决问题）。

有关更多代码和详细示例，请参见以下codepen：

https://codepen.io/surjikal/pen/XxxgNx

Answer 1

网格项应该如何知道每行要多少个项？

他们所知道的是它们的宽度不能小于120像素，但可以自由地消耗可用空间（在其轨迹中）。

所有容器知道的就是它的宽度。它不知道这些物品应该做什么。这些项目不知道您真正希望将它们包装在哪里，因此，根据您设置的规则，它们会退回到与容器的关系。

该布局适用于较小的容器，因为这些容器的宽度与您在轨道上设置的最小宽度非常匹配，以将每行的项目数限制为相等。但是，如果您将最小宽度从120px减少到50px，那么您会遇到与较大的容器相同的问题。

要使布局正常工作，您需要定义容器的宽度（已经完成）和项目的宽度。（您可以在不更改最小宽度变量的情况下执行此操作。）

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

.container-widest {
  grid-template-columns: repeat(auto-fit, minmax(120px, 25%)); /* new */
  width: 700px;
  background-color: rgba(200, 0, 0, 0.3);
}

.container-wide {
  grid-template-columns: repeat(auto-fit, minmax(120px, 200px));  /* new */
  width: 600px;
  background-color: rgba(200, 0, 0, 0.3);
}

.container-narrow {
  width: 400px;
  background-color: rgba(0, 200, 0, 0.4);
}

.container-narrower {
  width: 300px;
  background-color: rgba(0, 200, 0, 0.4);
}

/* style stuff */
html {
  padding: 20px;
  font-family: monospace;
}

.container {
  margin: 0 auto;
  margin-top: 20px;
  border-radius: 3px;
}

.cell {
  background: rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-bottom-width: 2px;
  color: rgba(0, 0, 0, 0.4);
  font-size: 26px;
  padding: 40px;
  text-align: center;
  font-weight: 1;
  border-radius: 3px;
}

p {
  text-align: center;
  padding-top: 50px;
}

<p>This should be 4 cells per row, to fill all blank spaces</p>
<div class="container container-widest">
    <div class="cell">1</div>
    <div class="cell">2</div>
    <div class="cell">3</div>
    <div class="cell">4</div>
    <div class="cell">5</div>
    <div class="cell">6</div>
    <div class="cell">7</div>
    <div class="cell">8</div>
</div>

<p>This should be 3 cells per row</p>
<div class="container container-wide">
    <div class="cell">1</div>
    <div class="cell">2</div>
    <div class="cell">3</div>
    <div class="cell">4</div>
    <div class="cell">5</div>
    <div class="cell">6</div>
</div>

<p>This one works great</p>
<div class="container container-narrow">
    <div class="cell">1</div>
    <div class="cell">2</div>
    <div class="cell">3</div>
    <div class="cell">4</div>
    <div class="cell">5</div>
    <div class="cell">6</div>
</div>

<p>This also works great!</p>
<div class="container container-narrower">
    <div class="cell">1</div>
    <div class="cell">2</div>
    <div class="cell">3</div>
    <div class="cell">4</div>
    <div class="cell">5</div>
    <div class="cell">6</div>
</div>

防止偶数个单元格上出现空白

1 个答案: