.main-dev {
display: grid;
grid-template-columns: 50% 50%;
}
我想將我的網格排列成 50% 50% 和 100% 的結構。我附上了所需的輸出影像。
電流輸出：
預期輸出：
uj5u.com熱心網友回復：
CSS：
.item{
border: 1px solid red;
text-align: center;
padding: 10px;
}
.main-dev {
display: grid;
grid-template-columns: 50% 50%;
width: 200px;
}
.item3{
grid-column: 1 / 3; /* or grid-column: 1 / span 2 */
}
HTML：
<div class="main-dev">
<div class="item">1</div>
<div class="item">2</div>
<div class="item item3">3</div>
</div>
uj5u.com熱心網友回復：
你可以試試這個
.item3 {
grid-column-start: 1;
grid-column-end: 3;
}
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}<div class="grid-container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
</div>uj5u.com熱心網友回復：
所以。假設您有 3 個專案，其類名稱為item1, item2, item3。
這是style他們的：
.item1 { grid-area: item1; }
.item2 { grid-area: item2; }
.item3 { grid-area: item3; }
div{
display: grid;
grid-template-areas:
'item1 item2'
'item3 item3'
grid-gap: 10px;}
uj5u.com熱心網友回復：
首先，您可以使用col-. 這是我的例子：
.red{
border: 1px solid red;
height:200px;
}
.col-6{
float:left;
width:50%;
}
.col-12{
float:left;
width:100%;
}<body>
<div class="col-6">
<div class="red"></div>
</div>
<div class="col-6">
<div class="red"></div>
</div>
<div class="col-12">
<div class="red"></div>
</div>
</body>您可以根據需要修改代碼。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/390321.html