CSS网格最多4列

Question

我试图获得某种“动态”列取决于项目的数量。

容器可以有1到4个项目。如果有1-3个项目，我希望列数是3个，如果有4个项目，我希望列数是4个。

这是我现在有的，它工作很好，如果有1-3个项目，但如果有4个项目，然后最后一个去下一行。如果我有grid-template-columns:repeat(4,1fr)；，当只有4个项目时，这会很好地工作。

有可能用CSS实现这一点吗？

多谢了。

null

.container {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(3, 1fr);
  
  border: 1px solid #c1c1c1;
  border-radius: 5px;
  padding: 5px;
}

.container > div {
  height: 100px;
  border: 1px solid #010101;
  border-radius: 5px;
}

html prettyprint-override"><div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

null

Answer 1

另一个想法：

null

.container {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns:0.33333fr; /* 0.333 = 1/3 */  
  border: 1px solid #c1c1c1;
  border-radius: 5px;
}

.container > div {
  height: 100px;
  margin:5px;
  border: 1px solid #010101;
  border-radius: 5px;
}

<div class="container">
  <div></div>
</div>

<div class="container">
  <div></div>
  <div></div>
</div>

<div class="container">
  <div></div>
  <div></div>
  <div></div>
</div>

<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Answer 2

不使用您使用grid-template-columns定义的显式列，而是使用网格根据需要自动创建的隐式列。

null

.container {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  grid-auto-rows: 100px;
  border: 1px solid #c1c1c1;
  border-radius: 5px;
  padding: 5px;
}

.container > div {
  grid-row: 1; /* keeps all items on the first row */
  border: 1px solid #010101;
  border-radius: 5px;
}

<div class="container">
  <div></div>
</div>

<hr>

<div class="container">
  <div></div>
  <div></div>
</div>

<hr>

<div class="container">
  <div></div>
  <div></div>
  <div></div>
</div>

<hr>

<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>