网格响应式两个更大的填充空间

Question

有人能帮我吗，如果我有两个大的块填满空间，如果三个以上的小。 我试着用网格来做。 我需要的

这是我的代码：

ul {
  display: grid;
  grid-gap: 6px;
  grid-template-columns: repeat(auto-fill, minmax(3rem, 45%));

  background: lightgray;
  list-style: none;
  padding: 0;
}

ul > * {
  background: black;
  min-height: 3rem;
}

.test >li {
  background:red ;
  width: 100%;
  height: 100%;
}

<h2>Full Container</h2>
<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

<ul class="test">
  <li></li>
  <li></li>
</ul>

Answer 1

解决方案 1

使用 flexbox 很容易实现如下结果：

.container {
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}

.box {
  list-style: none;
  margin: 8px;
  border: 1px solid black;
  padding: 60px;
  min-width: 40px;
  flex: 1;
}

<ul class="container">
  <li class="box"></li>
  <li class="box"></li>
  <li class="box"></li>
</ul>

您可以为每个框设置最小宽度。如果您有这个最小宽度要求，您应该将 flex-wrap: wrap 设置为容器以使其具有响应性。

解决方案 2

使用 grid 您可以使用 grid-auto-columns 而不是 grid-template-columns 来达到相同的效果。 em>:

.container {
  padding: 0;
  display: grid;
  grid-auto-columns: auto;
}

.box {
  margin: 8px;
  border: 1px solid black;
  padding: 60px;
  min-width: 40px;
  grid-row: 1;
  list-style: none;
}

@media screen and (max-width: 768px) {
  .box {
    grid-row: auto;
  }
}

<ul class="container">
  <li class="box"></li>
  <li class="box"></li>
  <li class="box"></li>
</ul>

为了提高响应能力，您可以使用媒体查询，将容器中的每个子项的网格行设置为自动。