CSSグリッドを使った基本的なレイアウト（パターン１）

2022年2月25日 20:19

こんにちは。Minaです。
今回はHTMLとCSSに関する記事になります。
CSSグリッドを使った基本的なレイアウト（パターン１）について紹介します。

前回、Flexboxによる基本的なレイアウト（パターン１）を紹介したのですが、今回はそれと全く同じものをCSSグリッドを使って組んでいきます。

sp版

CSSグリッドレイアウト（sp版）

pc版

CSSグリッドレイアウト（pc版）

sp版では、６つのアイテムが1列に2つずつ並んでいます。pc版では、6つのアイテムが1列に3つずつ並んでいます。各アイテムは、画像（ここでは背景色をつけただけ）と文章で構成されています。今回はこれをモバイルファースト（sp版の表示を基本とする）で作っていきます。

では、さっそく、htmlを見ていきましょう。少し長いです。

<!DOCTYPE html>
<html lang="ja">

<head>

</head>

<body>

<h2 class="heading">Gridレイアウト</h2>

<div class="item">
<div class="item-img"></div>
<p class="item-txt"><span>テキスト</span>テキストボックス。テキストボックス。テキストボックス。テキストボックス。
テキストボックス。テキストボックス。</p>
</div>

</div>

</div>

</body>

</html>

ここまでです。

<div class="item-img"></div>
が画像（ここでは背景色をつけるだけ）になります。

<p class="item-txt"><span>テキスト</span>テキストボックス。テキストボックス。テキストボックス。テキストボックス。
テキストボックス。テキストボックス。</p>
が文章になります。

これら画像と文章を1セットとして、itemクラスを作り囲っています。このitemを6つ作ります。1つ作ったら後はコピペです。そして、各itemをCSSグリッドを使ってレイアウトするため、containerクラスを作り囲っています。

htmlは以上になります。次は、cssを見ていきましょう。

CSSグリッドを使ったレイアウトをする前に、大本の設定を行います。

*{
margin : 0;
padding : 0;
}

*,
*::before,
*::after{
box-sizing : border-box;
}

html{
font-size : 100%;
}

body{
font-family : sans-serif;
color : #432;
}

リセットcssを読み込んでいないので、ブラウザによる空白を、
*{
margin : 0;
padding : 0;
}
で取り合えずなくしています。

また、
*::before,
*::after{
box-sizing : border-box;
}
でボックスモデルをborder-boxに変更しています。

では、CSSグリッドを使ったレイアウトの設定をしていきましょう。

まずは、画像の設定を行います。

.item-img{
background-color : #ddd;
width : 100%;
height : 200px;
}

画像の色は灰色にしています。
横幅は親要素の100%にし、高さを200pxに固定しています。

続いて、文章の設定を行います。

.item-txt span{
display : block;
}

spanをブロック要素にして改行させています。

続いて、containerクラスの設定を行います。
.container{
display : grid;
grid-template-columns : 1fr 1fr;
gap : 20px;
}

display : grid;でグリッドレイアウトモードにします。初期段階では、グリッドアイテムが縦に並びます。
grid-template-columns : 1fr 1fr;で1列に2つグリッドアイテムを並べます。1frとすることで、1:1の割合でグリッドアイテムを表示できます。
これは、repeat関数を使って、
grid-template-columns : repeat(2, 1fr);
と書くこともできます。
gap : 20px;でグリッドアイテム同士の間隔を20px分取っています。

続いて、全体を囲むgridの設定です。

.grid{
padding : 0 20px;
}

左右の両端に余白20pxを設けています。

最後に、見出しとなるheadingクラスの設定をします。

.heading{
padding : 20px 0;
}

上下に20pxの余白を設けています。

以上がsp版の設定になります。
続いて、pc版の設定をしていきます。
メディアクエリを使います。一気に見てしまいましょう。

@media screen and (min-width : 768px),print{

.grid{
max-width : 1200px;
margin : 0 auto;
}

.container{
grid-template-columns : 1fr 1fr 1fr;
}

}

ここまでです。

まず、@media screen and (min-width : 768px)で、画面幅768px以上の設定をしますと宣言しています。

.grid {
max-width : 1200px;
margin : 0 auto;
}

max-width : 1200px;で最大横幅を1200pxに設定しています。
margin : 0 auto;で左右に中央寄せしています。

.container{
grid-template-columns : 1fr 1fr 1fr;
}

grid-template-columns : 1fr 1fr 1fr;で1列に3つグリッドアイテムを並べます。1frとすることで、1:1:1の割合でグリッドアイテムを表示できます。
これは、repeat関数を使って、
grid-template-columns : repeat(3, 1fr);
と書くこともできます。

おつかれさまでした。
以上がCSSグリッドを使った基本的なレイアウト（パターン１）についての説明になります。
今回のようなタイル型にアイテムを並べる場合は、Flexboxでレイアウトを組むよりも、CSSグリッドでレイアウトを組む方が簡単にできますね。FlexboxとCSSグリッドを両方上手に使いこなしてレイアウトを組んでいければ楽しそうですよね。では、今日も明日も気楽に頑張りましょう。

この記事が気に入ったらサポートをしてみませんか？