CSSグリッドを使うには、Flexboxと同じように、親要素と子要素が必要になります。
使い方は「display:grid;」を使用します。
完成した形はこうなります。

CSS
「grid-template-columns」は1行にいくつ入れるかです。
1行に2つ並べたい場合、1fr 1frの2つになります。
「grid」は隣のグリッドの空白部分の指定です。
「grid-template-rows」は、1つのグリッドの縦横の長さをしています。
.box{
display:grid;
grid-template-columns:1fr 1fr 1fr;
gap:10px;
grid-template-rows:200px 200px;
}HTML
<div class="box">
<div class="item">Item1</div>
<div class="item">Item2</div>
<div class="item">Item3</div>
<div class="item">Item4</div>
<div class="item">Item5</div>
<div class="item">Item6</div>
</div>それでは、実際に解説していきます。


コメント