grid レイアウトの基本的な使い方

目次

gridレイアウトとは

gridレイアウトは親の要素をマス目のように区切って子要素を配置するレイアウト方式です。

Flexbox と違い、親要素に display: grid; だけでなく、一緒に子要素の配置方法についても記述するのが特徴です。

gridにはマスの設定に使うCSSのプロパティがあります。

  • grid-template-columns(マスの横方向の設定)
  • grid-template-rows(マスの縦方向の設定)
  • grid-template-areas(エリアの設定)
  • gap(セルの間のスペース)
コンテンツ1
コンテンツ2
コンテンツ3
コンテンツ4
コンテンツ5
コンテンツ6

上記は親の要素に縦と横の設定をした物です。

親のCSS
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 100px 100px;

※ fr は gridレイアウト専用の単位。
親要素の大きさから良い感じに割合でサイズを調整してくれる。

親にこの3行のCSSだけで6つのセルを作ることが出来ます。
子要素はわかりやすいように色と枠線を付けています。

セルの設定

横の幅の設定

セルの横幅の設定をするには下記のプロパティを使います。

grid-template-columns: 100px 100px 100px;

“3つ”の”100px”のセルが横方向にならぶ。

grid-template-columns: 10em 250px 1fr;
といった事も可能です。

縦の幅の設定

横と同じように縦のセルは下記のプロパティで設定します。

grid-template-rows: 100px 100px;

“2つ”の”100px”のセルが縦に並ぶ。

横幅は colunms に対して rows で縦の高さを設定します。

100px の高さのセルが2段あるので、先ほどのgrid-template-colunms: 100px 100px 100px; と合わせると

横3セル×縦2セルの6セルのgridレイアウトができるという事です。 

省略した書き方

縦と横のセルの設定を説明しましたが、省略した書き方があります。

grid-template: 縦の設定/横の設定;

簡単だし、このプロパティ使いますよね。

セル間の余白

gap というプロパティを使う事でセルの間のスペースを設定できます。

セルの”間”にだけスペースが出来ましたが、周りに余白は出来ません。
分かりやすいよう親要素に青い border を付けました。

コンテンツ1
コンテンツ2
コンテンツ3
コンテンツ4
コンテンツ5
コンテンツ6

gridレイアウトのエリアとは

エリアとはセルの結合

例えば9個のセルがあって、セルを繋げて要素を配置したいとします。

gridレイアウトを使えば…

コンテンツ1
コンテンツ2
コンテンツ3
コンテンツ4
コンテンツ5
コンテンツ6
コンテンツ7
コンテンツ8
コンテンツ9

このように簡単にセルを使ってレイアウトが組めるのです。

header
copy
content

やり方は

親要素に
grid-template-areas:
“header header header ”
“copy content content”
“footer footer footer “;

を追加します。CSSの中身が”セルと同じ配置”になっていますね。

“”の中身は任意でつけた名前です。

あとは子要素をクラス分けして

.header{
grid-area: header;
}

と入力すると、親要素で決めたCSSのエリアに表示されるようになります。

css.logo

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!

-広告-

国内WordPressテーマ シェア率 No.1

Web制作案件にも使いやすい WordPress テーマ

SWELL

シンプルで多機能、そしてカスタマイズしやすい

ダッシュボードやカスタマイズ画面に沢山の設定が追加されていて、ノーコードでも相当なカスタマイズが可能。
追加CSS、追加JavaScript をページ毎に入力欄があるので、細部までこだわったサイト制作が可能。

買い切り型で、複数サイトに使用可能、Web制作案件にも

一度購入すれば、いくつのサイトに使用してもOK。フリーランスのWeb制作案件にも使えます。
メンバー登録すればテーマ更新も無償。

  • 一度買えば、月額料金はなし
  • 複数サイトで使用可能
  • ノーコードでも調整できる設定が、ダッシュボードやカスタマイズ画面に大量追加
  • ブロックエディタの豊富な追加ブロックで投稿がリッチに
  • 細部の調整が、「追加CSS と 追加JavaScript」 で簡単に出来る
  • 他の人気テーマ からの乗り換え対応プラグイン配布( cocoon, ADDINGER, JIN, SANGO, STORK, THE THOR)

この記事を書いた人

bobuのアバター bobu Webクリエイター

ホームページ制作、リメイク、バナー、画像制作を行っています。
毎朝5:00-7:00 まで朝活で ITの知識を インプット+ Twitter へアウトプット。
お仕事のご依頼は「お問い合わせページ」からご連絡ください。

目次