如何制作这种响应式网格布局？

Question

我认为简单的布局是我无法完成的事情。

我需要网格响应并从一侧传播到另一侧（它必须与上面的文本和框对齐）。

我尝试了一些选项，我将它们评论出来以便于检查：

.big-container {
  padding: 0 20%;
}

.header {
  width: 100%;
  height: 50px;
  background-color: blue;
}

.container {
  border: 1px solid black;
  
/*   display: flex;
  flex-wrap: wrap;
 */

/*   display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
   */
  
}

.box {
  border: 1px solid black;
  width: 100px;
  height: 30px;
  background-color: yellow;
  
/*   float: left;
  margin-left: 10px; */
}

<div class="big-container">
  <div class="header"></div>
  <p>Text</p>
  <div class="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
</div>

我尝试使用flex，但最后一行flex-wrap: wrap和float:left并没有很好地排序，但有一些边距未正确对齐左边。

Answer 1

如果您使用flexbox并设置justify-content: space-between，那么最后一行也将具有相同的间距而不是左对齐。相反，您可以使用网格布局。

＆＃13;

＆＃13;

.big-container {
  padding: 0 20%;
}

.header {
  width: 100%;
  height: 50px;
  background-color: blue;
}
.container {
  border: 1px solid black;
  display: grid;
  justify-content: space-between;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  grid-gap: 10px;
}
.box {
  border: 1px solid black;
  height: 30px;
  background-color: yellow;
}

＆＃13;

<div class="big-container">
  <div class="header"></div>
  <p>Text</p>
  <div class="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;