はじめに

昔にHTMLとCSSを勉強して以来、ほぼ触れて来なかったのですがいつの間にかGridレイアウトなる物が登場していたのでその勉強録的な感じで書いていきます(ちなみに自分がやった中ではflexboxが一番新しい知識です)。

失踪しないように頑張ります()

全然蛇足なのですが、「Gridレイアウト」「Grid Layout」「CSS Gridレイアウト」「CSS Grid Layout」ってどれが正解(というか一般的というかなんというか)なんでしょうね
個人的には「Gridレイアウト」がしっくり来るような(「Grid Layout」も捨てがたい......)

kedama_nth

参考にしたサイトその1

全部は読んでない
文章表現が少し硬くて拒絶反応が出そう(出た)
でも図が多いのでサンプルコードと図だけでも十分に理解できそう

kedama_nth

参考にしたサイトその2

全部は読んでない(意識的に残さないと後々履歴を辿る羽目になるのでとりあえずメモろうの精神)
FlexboxとGridレイアウトの違いについて解説してあるのがGood
グリッドコンテナ, グリッドアイテムなど覚えなきゃいけないであろう単語がいっぱい()

kedama_nth

蛇足その1

Flexboxを弄っていた当時参考にしていたサイトを見つけたので一応メモ
短い文章と図でプロパティ1つ1つを解説しているサイト
個人的にはこういうのが見やすい＆わかりやすいかもしれない

kedama_nth

実際に書いてみるその1

grid-template-columnsの使い方

使用したソースコードはこんな感じ

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<link href="style.css" rel="stylesheet" media="all">
	<title>Gridレイアウト 練習</title>
</head>
<body>

<div class = "container">
    <div class = "item" id = "item_1">Item 1</div>
    <div class = "item" id = "item_2">Item 2</div>
    <div class = "item" id = "item_3">Item 3</div>
    <div class = "item" id = "item_4">Item 4</div>
    <div class = "item" id = "item_5">Item 5</div>
</div>

</body>
</html>

.container{
    display: grid;
}

.item{
    border: solid 1px #000;
}

container クラスに対して grid-template-columns プロパティを適用すると「列(横)方向のグリッドトラックのサイズを定義」することができる(この辺、なんとなく理解はしているのですが、前提条件の理解度が少し低いのでまだしっくりする文章が書けない)。
つまり、 grid-template-columns プロパティを適用すると列方向のトラックサイズと数が指定できる。
container クラスに対して以下のプロパティを順に設定、プレビューすれば大体理解できる。

/* 1列を100pxとして2列作成 */
grid-template-columns: 100px 100px;

/* 範囲を2列に分割する(1列の幅は自動で計算される) */
grid-template-columns: 1fr 1fr;

/* 範囲を3列に分割する(ただし、1列目だけは2fr分のサイズを持つ) */
/* 4分割→2列分を1列として扱い、それ以降を1列分を1列として扱う */
grid-template-columns: 2fr 1fr 1fr;

/* 範囲を3列に分割する(1列の幅は自動で計算される) */
/* 1fr 1fr 1frを(3, 1fr)と表現している */
grid-template-columns: repeat(3, 1fr);

ちなみに、pxとfrを混ぜることもできる(emとかも混ぜれそう)

kedama_nth

Gridレイアウトの基本的な考え方・用語

GridレイアウトはExcelやスプシのように行列の2次元でアイテムを配置(レイアウト)しよう、という考えです(だと思う)
そこで登場するのが

グリッドライン
グリッドセル
グリッドトラック
グリッドエリア

という用語です
それぞれ、表計算ソフトと対応させるなら
グリッドライン=目盛線(罫線)
グリッドセル=セル
グリッドトラック=行/列のこと 1,2,3,... A,B,C,...
グリッドエリア=名前付き範囲(例 A1:C3に"エリア1"という名前を付けた)
と言った感じでしょうか
先の例を踏まえるなら、 grid-template-columns プロパティはグリッドトラック(列)に対してサイズを指定する......つまり、A列, B列, ...といった列の幅を変えていることになります
grid-template-columns: 1fr 1fr 1fr; であれば、A-C列だけを使用し利用できる範囲(親要素に割り当てられている範囲に依存する(？))を3等分、3列の表(グリッド)を作成する、ということになる

kedama_nth

参考にしたサイトその3

なんか色々載っている
プロパティの詳細や解説に繋がるリンクがあるのでもくじ的な使い方ができそう