如何在 html css 中制作响应式网格布局

Question

我在 inte.net 上搜索过，找不到这种网格布局。

“grid-template-columns”没有做这件事，不能做一个比其他更大的盒子。 我想要 4 个相等的盒子和 1 个高度和宽度相等的盒子 = 方形盒子 * 2 + gridgap。

这是我为了让您理解我的意思而说明的图像。

我也尝试过使用 display flex，但我没有想到它。 请帮我。 谢谢！

我的想法的例证

Answer 1

问题的答案（“如何在 html css 中制作响应式网格布局”）是这样的：

 .wrapper { display: grid; justify-content: center; }.box { border: 2px solid #000; width: 128px; min-height: 128px; justify-content: center; margin: 10px; display: grid; align-items: center; }.box5 { grid-column: 2/5; max-width: 280px; width: 100%; } /*for this to be visible, the screen-width has to be under 600px*/ @media (max-width: 600px) {.box5 { grid-column: 2/1; } }

 <div class="wrapper"> <div class="box1 box">128x128</div> <div class="box2 box">128x128</div> <div class="box3 box">128x128</div> <div class="box4 box">128x128</div> <div class="box5 box">280x128</div> </div>

Answer 2

就像在图像中

 .container { display: flex; flex-direction: column; justify-content: space-between; width: 100%; height: 180px; }.row { display: flex; flex-direction: row; justify-content: center; }.box { width: 10vw; height: 10vw; margin: 12px; border: 1px solid black; }.box.big { width: calc(20vw + 24px); }

 <div class="container"> <div class="row"> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> <div class="row"> <div class="box big"></div> </div> </div>

彼此正下方的字段 1-5 以当前宽度居中到中间

 .container { display: flex; flex-direction: column; align-items: center; width: 100vw; height: 100vw; }.box { width: 10vw; height: 10vw; margin: 12px; border: 1px solid black; }.box.big { width: calc(20vw + 24px); }

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