一時期グリッドデザインというものが盛大に流行りましたよね。
そのころはいろいろなサービスを見つけて、こんなやり方もあるんだぁ
くらいな感じで実際にウェブサイトにグリッドデザインをメインでがっつりと
組み込むことはしなかったので、CSS Grid Layout Moduleと出会うまでに
とても時間がかかりました。
こんな便利なものがあるのならあそこのコーディングもああしておけばよかった…
なんて今更後悔しています。
flexboxと同じ感じですね。笑
flexboxを使いだすとどんどんfloatを使用しなくなる感じの感覚です。
では、まずはじめにCSS Grid Layout Moduleとは何かといいますとHTMLとCSS を使った
簡単、そして自由に操作できる、CSSの新しい機能という認識で間違いないと思います。
その名の通り格子状のます目のグリッドを
好きな順序で配置したり結合したりすることで、様々なレイアウトが可能になります。
まずは実際にどんなことができるのか簡単なソースを書いてみました。
See the Pen CSS Grid Layout Module by sayuri (@giraffeweb) on CodePen.0
分数らしきものがcssに見えてくると思いますが、どう定義しているかいまいちわかりませんよね？
ではまず基本的なとこから解説します！
Grid Layout Moduleで使用する用語
Grid Layout Moduleは、まず使用する用語と意味を理解しておきましょう。
特に次の用語は頻繁に使います。
■グリッドコンテナ
■グリッドアイテム
■グリッドライン
■グリッドトラック
■グリッドセル
■グリッドエリア
今回は、上の1つ目グリッドコンテナについて解説します。
Flexboxでも同じような概念があると思いますので、flexboxをご存知のかたは
同じような感覚で認識するとわかりやすくなります。
ちなみにフレックスコンテナとフレックスアイテムのような親子関係なのが
グリッドコンテナとグリッドアイテムです。
グリッドコンテナについて
display: grid;またはdisplay: inline-grid;を指定した要素が
『グリッドコンテナ』になります。
グリッドの分割数、分割されたグリッドの列や行の幅や高さなど、
レイアウトに関する情報を指定できます。
例えばグリッドコンテナに500pxずつの2列2行のグリッドを作成するとしましょう。
その場合は、次のような記述となります。
grid-template-columnsが列、grid-template-rowsが行です。
<div class="grid"></div>
.grid {
display: grid;
grid-template-columns: 500px 500px;
grid-template-rows: 500px 500px;
}
グリッドコンテナに関連するプロパティは、以下になります。
■grid
grid-template、grid-auto-flow、grid-auto-rows、grid-auto-columnsを指定できる。
■grid-template
grid-template-columns、grid-template-rows、grid-template-areasを指定できる。
■grid-template-rows
行のグリッドトラックそれぞれのサイズを指定。
■grid-template-columns
列のグリッドトラックそれぞれのサイズを指定。
■grid-template-areas
名前の付いたグリッドエリアを指定。
■grid-auto-flow
明示的に配置されていないグリッドアイテムの配置方法を指定。
■grid-auto-rows
自動生成される行のグリッドトラックそれぞれのサイズを指定。
■grid-auto-columns
自動生成される列のグリッドトラックそれぞれのサイズを指定。
■grid-gap
grid-row-gap、grid-column-gapを指定できる。
■grid-row-gap
行と行の間の余白を指定。
■grid-column-gap
列と列の間の余白を指定。
■justify-items
グリッドアイテムの横方向の整列を指定。
■align-items
グリッドアイテムの縦方向の整列を指定。
■justify-content
グリッドトラックの横方向の整列を指定。
■align-content
グリッドトラックの縦方向の整列を指定。
これらのプロパティを仕様して、レイアウト情報を指定していきます。
来週はグリッドアイテムについて解説します！