拜托，我的CSS 網(wǎng)格定位有一個(gè)小問(wèn)題。我有四列auto-fit財(cái)產(chǎn)。例如，如果我的顯示器寬度大于 1376px，則沒(méi)有問(wèn)題（在移動(dòng)設(shè)備中也沒(méi)有問(wèn)題，因?yàn)檫@樣我每行僅顯示一個(gè)項(xiàng)目 - 如您所知，像素比例不同）。但我對(duì)寬度為 1024px 的顯示器有問(wèn)題，例如然后我顯示 3 個(gè)項(xiàng)目，在第二行中我只有最后一個(gè)項(xiàng)目，看起來(lái)非常糟糕。HML 片段<div class="content"> <div class="grid-box"> <div class="grid-box-icon"><i class="fa fa-hands-wash"></i></div> <h2>Wash your hands</h2> </div> <div class="grid-box"> <div class="grid-box-icon"><i class="fa fa-head-side-mask"></i></div> <h2>Cover your face</h2> </div> <div class="grid-box"> <div class="grid-box-icon"><i class="fa fa-people-arrows"></i></div> <h2>Social distance</h2> </div> <div class="grid-box"> <div class="grid-box-icon"><i class="fa fa-spray-can"></i></div> <h2>Sanitize common items</h2> </div></div>還有我的 css 片段.content { display: grid; grid-template-columns: repeat( auto-fit, minmax(300px, 1fr) ); min-height: calc(50vh - 20pt);}.grid-box { margin: 10pt; padding: 20pt 10pt 0pt 20pt; text-align: center; background-color: rgba($color: #ccddcc, $alpha: 0.6); border-radius: 30px; border: 1px solid black;}我想要的結(jié)果是僅以雙胞胎的形式顯示。第一列中沒(méi)有 3 個(gè)項(xiàng)目，第二列中沒(méi)有 3 個(gè)項(xiàng)目。僅一行中的所有 4 個(gè)項(xiàng)目，或者監(jiān)視器小于第一行上的 2 個(gè)項(xiàng)目和第二行上的 2 個(gè)項(xiàng)目。請(qǐng)問(wèn)可以不使用media-querycss嗎？是的。我知道這是可能的，media-query但我相信 CSS Grid 很聰明，可以在不使用它的情況下解決它。謝謝。
3 回答
冉冉說(shuō)
TA貢獻(xiàn)1877條經(jīng)驗(yàn) 獲得超1個(gè)贊
您可以將兩個(gè)組合grid-box到另一個(gè)中div并獲得所需的輸出。`
<div class="content">
<div class="content">
<div class="grid-box">
<div class="grid-box-icon"><i class="fa fa-hands-wash"></i></div>
<h2>Wash your hands</h2>
</div>
<div class="grid-box">
<div class="grid-box-icon"><i class="fa fa-head-side-mask"></i></div>
<h2>Cover your face</h2>
</div>
</div>
<div class="content">
<div class="grid-box">
<div class="grid-box-icon"><i class="fa fa-people-arrows"></i></div>
<h2>Social distance</h2>
</div>
<div class="grid-box">
<div class="grid-box-icon"><i class="fa fa-spray-can"></i></div>
<h2>Sanitize common items</h2>
</div>
</div>
</div>
天涯盡頭無(wú)女友
TA貢獻(xiàn)1831條經(jīng)驗(yàn) 獲得超9個(gè)贊
不帶 mediaquerie 的 Flex 也可以是這里的一個(gè)選項(xiàng)，因?yàn)闆](méi)有元素可以跨越行或列。
將元素包裝在 1、2 或 4 行中的想法示例：
body {
margin: 0;
}
.content {
display: flex;
flex-wrap: wrap;
}
.grid-box {
margin: 10pt;
padding: 20pt 10pt 0pt 20pt;
text-align: center;
background-color: rgba(204, 221, 204, .6);
border-radius: 30px;
border: 1px solid black;
flex: 1;
min-width: 350px;
min-height: calc(50vh - 40pt);
}
.grid-box {/* optionnal, for the demo */
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet" />
<div class="content">
<div class="grid-box">
<div class="grid-box-icon"><i class="fa fa-hands-wash"></i></div>
<h2>Wash your hands</h2>
</div>
<div class="grid-box">
<div class="grid-box-icon"><i class="fa fa-head-side-mask"></i></div>
<h2>Cover your face</h2>
</div>
<div class="grid-box">
<div class="grid-box-icon"><i class="fa fa-people-arrows"></i></div>
<h2>Social distance</h2>
</div>
<div class="grid-box">
<div class="grid-box-icon"><i class="fa fa-spray-can"></i></div>
<h2>Sanitize common items</h2>
</div>
</div>
四季花海
TA貢獻(xiàn)1811條經(jīng)驗(yàn) 獲得超5個(gè)贊
您可以簡(jiǎn)單地將每?jī)蓚€(gè) div 放入一個(gè)，如下所示：https ://codepen.io/Aypro18/pen/OJyMVMq?editors=1100
CSS：
.content {
display: grid;
grid-template-columns: repeat( auto-fit, minmax(300px, 1fr) );
min-height: calc(50vh - 20pt);
}
.grid-container{
display: grid;
grid-template-columns: repeat( auto-fit, minmax(300px, 1fr) );
min-height: calc(50vh - 20pt);
}
.grid-box {
margin: 10pt;
padding: 20pt 10pt 0pt 20pt;
text-align: center;
background-color: rgba($color: #ccddcc, $alpha: 0.6);
border-radius: 30px;
border: 1px solid black;
flex: 1 0 34%;
}
HTML：
<div class="content">
<div class="grid-container">
<div class="grid-box">
<div class="grid-box-icon"><i class="fa fa-hands-wash"></i></div>
<h2>Wash your hands</h2>
</div>
<div class="grid-box">
<div class="grid-box-icon"><i class="fa fa-head-side-mask"></i></div>
<h2>Cover your face</h2>
</div>
</div>
<div class="grid-container">
<div class="grid-box">
<div class="grid-box-icon"><i class="fa fa-people-arrows"></i></div>
<h2>Social distance</h2>
</div>
<div class="grid-box">
<div class="grid-box-icon"><i class="fa fa-spray-can"></i></div>
<h2>Sanitize common items</h2>
</div>
</div>
</div>
- 3 回答
- 0 關(guān)注
- 223 瀏覽