在 css 网格布局的同一行中将 div 与相同的 class 对齐
align the div's with same class within the same row in css Grid Layout
我想使用 css 网格布局将一些具有相同 class 名称的 div 排列成一行。当我尝试时,所有 div 都与另一个对齐。如何使用 css 网格布局实现此目的。
.front{
grid-area: front;
}
.accountcontainer{
display: grid;
margin: 0 10px;
background: #ffffff;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-areas:
"front front front front";
margin-bottom: 20px;
}
不要使用grid-area
只需为 class 指定 grid-row
。
注意 class 必须 的 div 数量等于(或小于)列。
.container {
display: grid;
margin: 10px auto;
background: #ffffff;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-auto-flow: rows;
margin-bottom: 20px;
border: 1px solid grey;
}
.item {
height: 60px;
background: pink;
display: flex;
justify-content: center;
align-items: center;
color: whitesmoke;
border: 1px solid red;
}
.item.front {
background: rebeccapurple;
}
.front {
grid-row: 1;
}
<div class="container">
<div class="item front">1</div>
<div class="item front">2</div>
<div class="item"></div>
<div class="item front">3</div>
<div class="item front">4</div>
<div class="item"></div>
<div class="item"></div>
</div>
我想使用 css 网格布局将一些具有相同 class 名称的 div 排列成一行。当我尝试时,所有 div 都与另一个对齐。如何使用 css 网格布局实现此目的。
.front{
grid-area: front;
}
.accountcontainer{
display: grid;
margin: 0 10px;
background: #ffffff;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-areas:
"front front front front";
margin-bottom: 20px;
}
不要使用grid-area
只需为 class 指定 grid-row
。
注意 class 必须 的 div 数量等于(或小于)列。
.container {
display: grid;
margin: 10px auto;
background: #ffffff;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-auto-flow: rows;
margin-bottom: 20px;
border: 1px solid grey;
}
.item {
height: 60px;
background: pink;
display: flex;
justify-content: center;
align-items: center;
color: whitesmoke;
border: 1px solid red;
}
.item.front {
background: rebeccapurple;
}
.front {
grid-row: 1;
}
<div class="container">
<div class="item front">1</div>
<div class="item front">2</div>
<div class="item"></div>
<div class="item front">3</div>
<div class="item front">4</div>
<div class="item"></div>
<div class="item"></div>
</div>