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

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

kokufu.ed.jp

結論

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

column

縦に並べたいレイアウトの時

flexbox

横に並べたいレイアウトの時

display:grid

多段組の時

www.tak-dcxi.com

グリッド線を使った指定

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

htmlの4つの箱を作成します

<div class="container">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</div>

css
１、まずはコンテナに

.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と同じような振る舞いをすると理解してもらえれば良いでしょう。

.container{
max-width: 1220px;
margin: 0 auto;
display: grid;
gap: 10px;

/* 3x3のままフルードの場合 */
grid-template-columns: repeat(3,auto);

/* boxの幅の最小サイズを指定したい場合 */
/* grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); */
}

.box{
background: #eb8787;
height: 300px;
}

</style>
</head>
<body>
<div class="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
<div class="box">8</div>
<div class="box">9</div>
</div>
</body>

www.webprofessional.jp

ics.media

Holy Grail Layout

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

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

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

www.itti.jp

www.theregister.com

記事より
・Safariは「新しいIE」になる危険性がある
・Web Platform Testsのテストサポート率は、Chrome・Firefoxは90%台、Safariは71%
・デスクトップならChromeを使えるが、iOSではWebKitしか使えない
・Safariのアップデートサイクルは他に比べて遅く、半年に一度