グリッドレイアウトの基礎 - display: grid; 触ってみた -

f:id:numb_yam:20191126163313p:plain
グリッドレイアウトのLP案件を担当したのでこれを機に手を出してみた。

グリッドレイアウトの基本

大まかな流れ

親にdisplay: grid;を設定
親に縦横の比率、grid間のスペースを設定する
子要素で、最小単位より大きくしたいときは追加で設定する

具体的な設定内容

■HTML

<div class="container">
  <div class="items items--l1">Large 1</div>
  <div class="items">1</div>
  <div class="items">2</div>
  <div class="items">3</div>
  <div class="items">4</div>
  <div class="items">5</div>
  <div class="items">6</div>
  <div class="items">7</div>
  <div class="items">8</div>
  <div class="items items--l2">Large 2</div>
</div>

■CSS

.container{
  display: grid;/* grid要素の設定 */
  grid-gap: 10px;/* grid要素間の隙間 */
  grid-template-columns: 1fr 1fr 1fr;/* グリッドの横幅の比率 */
  grid-template-rows: 1fr 1fr 1fr 1fr;/* グリッドの高さの比率 */
}
.items--l1{
  grid-column: 1 / 2;
  grid-row: 1 / 3;
}
.items--l2{
  grid-column: 3 / 4;
  grid-row: 3 / span 2;
}
/* 以下はレイアウト調整 */
.items{
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 10px;
  border-radius: 10px;
  border: solid 4px #ccc;
  background: #ddd;
}

メモ

grid-template-columns/grid-template-rowsは横、縦の子要素の割合を設定する。
px/%/fr(比率)で設定可能。
frは初見だったが、面倒くさければ上記のように何マス*何マスかだけ設定してやって、
イレギュラーな方をcssで詳細に指定しても良さそう。
www.webcreatorbox.com
grid-column/grid-rowは対象のグリッドの始点/終点を横縦両方で設定する。
エクセルのセル、座標指定のようなもの。
grid-row: n / span n;のようにspanに続けて「そこから何単位」と指定してやることもできる。

使って見た印象

display: flex;に慣れていたらわかりやすい。

親要素にどのような縦横のグリッド組みか、比率やグリッド間の設定をする。
次にイレギュラーな要素のcssを設定する。

凝ったレイアウトでなければこの程度で上のようなデザインは簡単にできた。
あと意外だけど子要素(ここでいう.items)にmax-width: 100%;をつけてやれば内容に限らずレイアウト崩れに対応できる。
親要素の設定ですでに比率設定されているので、そのmax幅を割り当ててやれば良い、ということだろう。
developer.mozilla.org
qiita.com
また、参考サイトにある通り、レスポンシブ対応する場合

.container {
	grid-template-columns: 1fr;
	grid-template-rows: auto;
}

で100%幅で落としていける。

ナム山

家最高今年一年でサックスが吹けるようになるか観測中

グリッドレイアウトの基礎 - display: grid; 触ってみた -

グリッドレイアウトの基本

具体的な設定内容

メモ

使って見た印象