【もりけん塾】はじめてのCSS grid

2021/10/03

今回は、**「　CSS grid 　」**について学習を行いました
学んだことや、参考にした記事などをまとめました

もりけん塾のもりけん先生が作った、ハンズオンを元に学習を進めました

gridに初めて触れる方でも. すぐに手を動かして学ぶことができる内容で、
gridでどの様なことができるのかを学ぶことができました

触って覚えるgridハンズオン学習・練習

https://github.com/kenmori/handsonFrontend/blob/master/css/grid-work.md

CSS gridとは？

CSSでレイアウトを実装する際の手法の一つであり、行と列を用いてレイアウトを実装することができる。

flexが横並びや、縦並びなどの一次元のレイアウトを行うのに対して、
行と列を使用し,コンテンツを配置できるgridは2次元のレイアウトシステムという。

https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout

gridの初め方　

display: grid; または display: inline-grid; を指定をすると
その要素が gridコンテナ となり、直接の子要素が gridアイテム となります

デベロッパーツールで確認すると以下の様な状態となりました
gridアイテム に線が引かれていて、これを ガイド線(grid線) といいます

列(column)と行(row)

grid-template-columns とgrid-template-rowsを使用し、列と行の定義を行います。
grid線とgrid線の間のスペースを、gridトラック といい、そのサイズの定義です。

本題に入る前にcolumnsとrowsについて...

display: grid;とすると右の様に格子状になることは前項で書いた通りです。

columnは列を、rowは行のことです
(私はどっちがどっちだかで混乱しました...)

.grid {
  display: grid;
  grid-template-columns: 200px 200px 200px;
  grid-template-rows: 100px 100px;
}

gridトラックのサイズが200 × 100になりました

repeat

先ほどのコードをrepeatを使用し、書き換えると...

.grid {
  display: grid;
  grid-template-columns: repeat(3, 200px);
  grid-template-rows: repeat(2, 200px);
}

repeat(繰り返したい回数, 繰り返したいこと) と指定しました

minmax()

**( 最小サイズ, 最大のサイズ )**を指定することができます

grid-template-columns: repeat(3, minmax(200px, 1fr));

fr

gridトラックのサイズは, 今回の様にpxで固定値を指定することもできますが、
%などの可変で設定することも可能です
またgridでは fr という単位を使用することができます(frはfractionの略)

fr 単位は、グリッドコンテナー内の利用可能な空間の分数 (a fraction) を表します

https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#the_fr_unit

一番最後のトラックだけに1frを指定しました

.grid {
  display: grid;
  grid-template-columns: 200px 200px 1fr;
  grid-template-rows: repeat(2, 200px);
}

配置

以下の様なレイアウトを実装をしていきます

/* gridコンテナ 　*/
.grid {
  display: grid;
  grid-template-columns: repeat(3, 200px);
  grid-template-rows: repeat(3, 100px);
}

grid-column とgrid-row を使用し, 開始 / 終了 の grid線を指定します

.grid-item1 {
　 grid-column: 1 / 4;　
}

.grid-item2 {
  grid-row: 2/ 4;
}

grid-columnとgrid-rowは、
grid-column(またはrow)-start・grid-column(またはrow)-end のショートハンドです。
そのため以下の様に書くことも可能です

.grid-item1 {
  grid-column-start: 1;
  grid-column-end: 4;
}

.grid-item2 {
  grid-row-start: 2;
  grid-row-end: 4;
}

やってみた

gridの範囲・配置については Grid Gardenというサイトで、手を動かして学ぶことができました

https://cssgridgarden.com/

grid-template-area

gridエリアに任意の名前をつけることができます

先程の例をgrid-template-areas を使用し、実装してみます

.grid {
  display: grid;
  grid-template-columns: repeat(3, 200px);
  grid-template-rows: repeat(3, 100px);
  grid-template-areas: 　　　　　　　　
    "header header header"　　
    "side-nav content content"
    "side-nav content content";
}

実際には見えませんが、以下の様に名前がついた状態となります

それぞれのgridアイテムにエリアの名前を指定することで範囲を変更することができます

.grid-item1 {
  grid-area: header;
}

.grid-item2 {
  grid-area: side-nav;
}

grid-template

grid-template-rows・ grid-template-columns・grid-template-area のショートハンド

/* 先程の例をgrid-templateで書き換えてみる
 .grid {
  　display: grid;
  　grid-template-columns: repeat(3,200px);
  　grid-template-rows: repeat(3,100px);
  　grid-template-areas: 　　　　　　　　
    　"header header header"　　
    　"side-nav content content"
    　"side-nav content content"
  　;
　} */

.grid {
  display: grid;
  grid-template:
    "header header header" 100px                                          /* rows */
    "side-nav content content" 100px                                    /* rows */
    "side-nav content content" 100px / 200px 200px 200px;   /* rows /  columns */
}

flex or grid

flexとgridの使い分けについては以下の記事を読みました

参考にした記事

https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout

https://coliss.com/articles/build-websites/operation/css/grid-for-layout-flexbox-for-components.html

まとめ

gridを学ぶ前は、複雑で難しいイメージを持っていたのですが
実際に手を動かすと、少ないコードでレイアウトを操ることができて楽しかったです。

もっと、色々gridで実装してみたいと思いました！
今回学んだことを忘れずに、定着をさせるためにも..他にも色々作ってみたいと思います

もりけん塾でJavaScriptを学習をしています！
もりけん先生のTwitter：https://twitter.com/terrace_tech

https://kenjimorita.jp/