CSS グリッドレイアウトは、 表と同様に簡単に段組等が作れ、グリッドレイアウトによって要素を列と行に整列させることができます。 CSS グリッドを使用する事で表で実現するよりもより複雑なレイアウトが可能で簡単に実現できます。またflexboxの場合、多段組が苦手なので多段組の時にすごく便利です。
結論
レイアウトする際に授業では「float」「flex」「grid」の３種類を使用してきましたが「どれが一番優れているか」では無く、各プロパティの特徴を理解し、上手に使い分ける事が重要です。
float
写真にテキストを回り込ませたい時
flexbox
1行もしくは1列のレイアウトの時
display:grid
多段組の時
htmlの4つの箱を作成します
<div class="container"> <div class="left-top"></div> <div class="left-bottom"></div> <div class="right-top"></div> <div class="right-bottom"></div> </div>
css
１、まずはコンテナに
.container {
display: grid;
}
２、次に中身（テンプレート）を作成。
.container {
display: grid;
grid-template:
"left-top right-top" 50%
"left-bottom right-bottom" 50% /
50% 50%;
}
.left-top{
grid-area: left-top;
background: #eb8787;
}
.left-bottom{
grid-area: left-bottom;
background: #d3c7c7;
}
.right-top{
grid-area: right-top;
background: #728cd4;
}
.right-bottom{
grid-area: right-bottom;
background: #8ae070;
}
3、最後にboxの余白の設定
.container {
display: grid;
grid-template:
"left-top right-top" 50%
"left-bottom right-bottom" 50% /
50% 50%;
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>
コメント