cssの同じ行内の同じクラスのdivを整列するグリッドレイアウト

Question

CSSのグリッドレイアウトを使用して、いくつかの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; 
    } 

Answer 1

はちょうどそのクラスのgrid-rowを指定grid-area

を使用しないでください。

注そのクラスMUSTと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>