タイル型に並べる【CSSグリッド】

grid

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>

それでは、実際に解説していきます。

コメント

タイトルとURLをコピーしました