See the Pen
css-gridでレイアウト by yachin29 (@yachin29)
on CodePen.
CSS グリッドレイアウトは、 表と同様に簡単に段組等が作れ、グリッドレイアウトによって要素を列と行に整列させることができます。 CSS グリッドを使用する事で表で実現するよりもより複雑なレイアウトが可能で簡単に実現できます。またflexboxの場合、多段組が苦手なので多段組の時にすごく便利です。
結論
レイアウトする際に授業では「float」「flex」「grid」の３種類を使用してきましたが「どれが一番優れているか」では無く、各プロパティの特徴を理解し、上手に使い分ける事が重要です。
float
写真にテキストを回り込ませたい時
flexbox
1行もしくは1列のレイアウトの時
display:grid
多段組の時
グリッド線を使った指定
グリッドの指定方法がいくつかありますが、まずは基本的な指定方法を習得しましょう
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>
Holy Grail Layout
「Holy Grail Layout（聖杯レイアウト）」とは、ヘッダ、フッタ、メインコンテンツ、両側のサイドバーの4つのセクションで構成された3カラムのレイアウトです。レイアウトは次の仕様を厳守します。
- 中央のコンテンツは可変、両側のサイドバーは固定の幅です。
- マークアップではコンテンツは、2つのサイドバーより上に記述されます。
- コンテンツとサイドバーはそれぞれの内容に関わらず、同じ高さです。
- コンテンツがビューポートの高さに満たない時でも、フッタは一番下に配置されます。
- レスポンシブ対応にする時、小さいビューポートではすべてのセクションが1つのカラムで積み重なって配置されます。
今までは、CSSハック無しでこれらの仕様をすべて実装するのは非常に困難でした。
「CSS Grid」を使用すると、非常にスマートに実装できます。
記事より
・Safariは「新しいIE」になる危険性がある
・Web Platform Testsのテストサポート率は、Chrome・Firefoxは90%台、Safariは71%
・デスクトップならChromeを使えるが、iOSではWebKitしか使えない
・Safariのアップデートサイクルは他に比べて遅く、半年に一度
