我在互聯網上搜索并找不到這種網格布局。
“grid-template-columns”不做這件事，不能做一個比其他的更大的盒子。我想要 4 個相等的框和 1 個高度和寬度相等的框 = 方形框 * 2 網格間隙。
這是我為使您了解我的意思而繪制的影像。
我也嘗試使用 display flex 但我沒有得到它的想法。請幫我。謝謝！
我的想法的插圖
uj5u.com熱心網友回復：
問題的答案（“如何在 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;
width: 280px;
}
/*for this to be visible, the screen-width has to be under 600px*/
@media (max-width: 600px) {
.box5 {
grid-column: 2/1;
align-items: center;
justify-content: center;
display: grid;
max-width: 128px;
width: 100%;
}
}<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>uj5u.com熱心網友回復：
就像圖片中的一樣
.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>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/526144.html
標籤：htmlcssCSS网格