cssのdisplay:grid を使ってグリッドレイアウトを作ってみる

CSS グリッドレイアウトは、表と同様に簡単に段組等が作れ、グリッドレイアウトによって要素を列と行に整列させることができます。 CSS グリッドを使用する事で表で実現するよりもより複雑なレイアウトが可能で簡単に実現できます。またflexboxの場合、多段組が苦手なので多段組の時にすごく便利です。

結論

レイアウトする際に授業では「float」「flex」「grid」の３種類を使用してきましたが「どれが一番優れているか」では無く、各プロパティの特徴を理解し、上手に使い分ける事が重要です。

★float：写真にテキストを回り込ませたい時

★flexbox：1行もしくは1列のレイアウトの時

★display:grid：多段組の時

■グリッド線を使った指定

グリッドの指定方法がいくつかありますが、まずは基本的な指定方法を習得しましょう

・htmlの4つの箱を作成

＜CSS側＞
１：まずはコンテナにgridを設定

.container {
　display: grid;
}

２：次に大きさを設定

.container {
　display: grid;
　width: 600px;
　height: 600px;
　grid-template-rows: 50%;
　grid-template-columns: 50%;
}

３：次にアイテム「.box」にグリッド線のどの位置に配置するか指定

.box1{
　grid-row:1;
　grid-column:1;
　background: #eb8787;
}
.box2{
　grid-row:1;
　grid-column:2;
　background: #d3c7c7;
}
.box3{
　grid-row:2;
　grid-column:1;
　background: #728cd4;
}
.box4{
　grid-row:2;
　grid-column:2;
　background: #8ae070;
}

４：最後にboxの余白の設定

gap:10px;

repeat() … repeat()関数で繰り返しパターンを指定可能。
「auto-fit」と「auto-fill」の違い

auto-fillでは、親要素にスペースが余る場合、空のグリッドが作られます。
auto-fitでは、親要素にスペースが余る場合、グリッド・アイテムの幅が変わってスペースが埋められます。

minmax()

minmax()ではグリッドアイテムの最小幅と最大幅を指定しています。この記述だと最小幅が200px、最大幅が1fr（可変のフラクション）です。

■fr

frとは「display: grid;」が指定された要素に対して有効な単位で、要素内の可用領域のうち占める割合を表す。Flexboxのflex-growと同じような振る舞いをすると理解してもらえれば良いでしょう。

Holy Grail Layout

「Holy Grail Layout（聖杯レイアウト）」とは、ヘッダ、フッタ、メインコンテンツ、両側のサイドバーの4つのセクションで構成された3カラムのレイアウトです。レイアウトは次の仕様を厳守します。

中央のコンテンツは可変、両側のサイドバーは固定の幅です。
マークアップではコンテンツは、2つのサイドバーより上に記述されます。
コンテンツとサイドバーはそれぞれの内容に関わらず、同じ高さです。
コンテンツがビューポートの高さに満たない時でも、フッタは一番下に配置されます。
レスポンシブ対応にする時、小さいビューポートではすべてのセクションが1つのカラムで積み重なって配置されます。

今までは、CSSハック無しでこれらの仕様をすべて実装するのは非常に困難でした。
「CSS Grid」を使用すると、非常にスマートに実装できます。

itti.jp/web-design/quick-css-grid/