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

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那么最后一行也将具有相同的间距而不是左对齐。 相反，您可以为此使用网格布局。

 .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; }

 <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>