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

Mina

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

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

sp版

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

pc版

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

sp版では、画像（ここでは背景色をつけただけ）と文章が縦に並んでいます。pc版では、画像と文章が横に並んでおり、２つめの画像と文章では、位置が１つめと逆になっています。今回はこれをモバイルファースト（sp版の表示を基本とする）で作っていきます。

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

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

<head>

<meta charset="utf-8">
<title>Gridレイアウト</title>
<meta name="description" content="Gridレイアウト">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/style.css">

</head>

<body>

<div class="grid">

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

<div class="container">

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

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

</div><!--container-->

</div><!--grid-->

</body>

</html>
ここまでです。

<meta name="viewport" content="width=device-width, initial-scale=1">
はsp版とpc版とレスポンシブに対応させるため必ず記述してください。

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

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

これら画像と文章を1セットとして、itemクラスを作り囲っています。このitemを２つ作ります。1つ作ったら後はコピペですが、２つめのアイテムは画像と文章の位置が逆になるため、reverseクラスを指定しています。そして、各itemをcontainerクラスを作り囲っています。

htmlは以上になります。次は、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に変更しています。

では、画像と文章の設定を行っていきましょう。

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

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

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

続いて、containerクラスの設定を行います。

.container{
display : grid;
gap : 20px;
}

display : grid;でグリッドレイアウトモードにして、gap : 20px;でitemクラス間の余白を20px分設けています。Itemクラス間の余白を設けるのにgapを使えると便利なので、グリッドレイアウトモードにしています。

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

.grid{
padding : 0 20px;
}

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

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

.heading{
padding : 20px 0;
}

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

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

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

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

.item{
display : grid;
grid-template-columns : 1fr 1fr;
align-items : center;
gap : 20px;
}

.reverse .item-img{
order : 2;
}

.reverse .item-txt{
order : 1;
}

}

ここまでです。

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

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

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

.item{
display : grid;
grid-template-columns : 1fr 1fr;
align-items : center;
gap : 20px;
}

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

.reverse .item-img{
order : 2;
}

.reverse .item-txt{
order : 1;
}

順序を変えるにはorderプロパティを使います。画像をorder : 2;、文章をorder : 1;とすることで、画像と文章の位置を入れ替えています。

おつかれさまでした。
以上がCSSグリッドを使った基本的なレイアウト（パターン２）についての説明になります。今回は、grid-template-columns : 1fr 1fr;で画像と文章の比を1:1にしていますが、grid-template-columns : 2fr 1fr;とすれば画像と文章の比を2:1にすることができます。ただ、その場合、画像と文章の位置を入れ替えたものについては、grid-template-columns : 1fr 2fr;とする必要がでてくるので注意してください。なので、.reverse{grid-template-columns : 1fr 2fr;}とする必要があります。
では、今日はこの辺で失礼します。

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