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

CSS

管理人
管理人

こんにちは、さえと申します👩‍💻
現在 フロントエンドエンジニアになるために 日々勉強をしています
このブログは その勉強の記録と アウトプットのために運営をしています✨

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

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

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

CSS gridとは?

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

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

グリッドレイアウトの基本概念 - CSS: カスケーディングスタイルシート | MDN
CSS グリッドレイアウトは、二次元グリッドシステムを CSS にもたらします。グリッドは、主要なページ領域や小さなユーザーインターフェース要素のレイアウトに利用できます。この記事では、 CSS グリッドレイアウトと、 CSS Grid Layout Level 1 仕様の一部の用語について紹介します。この記事では、そ...

gridの初め方 

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

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

列(column)と行(row)

grid-template-columnsgrid-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);
}
Image from Gyazo

配置

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

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

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

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

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

grid-columnとgrid-rowは、
grid-column(またはrow)-startgrid-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というサイトで、手を動かして学ぶことができました

Grid Garden
A game for learning CSS grid layout

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-rowsgrid-template-columnsgrid-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の使い分けについては以下の記事を読みました

まとめ

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

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

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