HACKsaw@blog

今回はCSSのお話です✍️

CSSのレイアウト方法として

• padding, marginで指定
• 横並びならflex

などがありますが、いつだかから

• gridでそこそこ自由に配置

がカードに加わりました

そして、gridを使いこなしていくうちに grid-template, grid-template-areas がなかなか強みがあることに気づいてからは多用しています。
今回はその強みについて説明します。

こんな書き方ができます

<div class="grid">
	<div style="grid-area: area-a">A</div>
	<div style="grid-area: area-b">B</div>
	<div style="grid-area: area-c">C</div>
</div>

.grid {
	display: grid;
	grid-template:
	  '... ...... ...' 2rem
		'... area-a ...' 1fr
		'... ...... ...' 1rem
    '... area-b ...' 1fr
    '... ...... ...' 3rem
    '... area-c ...' 1fr
    '... ...... ...' 2rem
    / 3rem 1fr 3rem;
}

ポイントは

• area-a と area-b の間(gap)は1rem
• area-b と area-c の間(gap)は3rem

としているにも関わらずHTML側で無駄なwrapperのdiv要素が無いことです！
HTMLの多重ネストは認知不可も高いので、兄弟要素として並列に並べることができるならそうするのがベターだと思います。

ついでに .grid のボックスの上下左右の padding や各areaの height, width も指定できていますし、 grid-template を見るだけでブラウザ上での見た目がイメージしやすいのもお気に入りポイントです

デメリットを挙げるなら、慣れるまで書くのがちょっと大変なところでしょうか?
上記の例の隙間埋めに使っている ”.” の数を調整するのも面倒なのでそういうプラグインほしいところ

先程の例をgapパターンで書くと

<div class="flex">
	<div class="a-b-wrapper">
		<div style="grid-area: area-a">A</div>
		<div style="grid-area: area-b">B</div>
	</div>
	<div style="grid-area: area-c">C</div>
</div>

.flex {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  padding: 2rem 3rem;
}

.a-b-wrapper {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

少なく記載してもこんな感じでしょうか。

• HTMLに無駄なwrapperが必要
  • (そのclass名を考えるのも不毛)
• HTML、CSSどちらを見ても仕上がりがイメージしにくい

という理由からあまり好きじゃないです。

近年の私の実装では、要素間の空間を空けるために paddingや margin を使うことは滅多になくなった。

その理由としては、要素の出し分け時など細かなデザイン変更に対応できなくなるためです。

特にWebアプリであるあるなのが、ユーザの状態に合わせて要素を出し分けをする状況。

特定条件である要素を表示/非表示にした時それぞれのデザインで直下の兄弟要素の margin-block-startが違ったりすると途端に破綻してしまうなどがあります。

私はこういうレイアウトが組まれた既存コードに何度も泣かされたので、

• padding は <a> のclickable範囲を広げたり border の指定時のボーダーとコンテンツ間の空間作りなど、特定条件下でしか使わない
• margin は使わない(使う場面が思いつかない)

としています。

ということで私は grid-template または grid-template-areas を積極的に用いています。

ただ、あまり世間で浸透している感じがしないのもデメリットかもしれません。

以前参画していた案件では意味を説明しなくてはいけなくなったり(そこは調べてくれと言いたかった)、メリットを伝えて納得させるのに無駄な時間をかけることになりましたね…。

みなさんも使える場面ではガンガン使って、認知度を上げる活動に参加してくれたら嬉しいです！👊

補足: grid-template-areas について

grid-template-areas は縦横幅の指定ができないので grid-template-rows/columns を併用する形になります。12等分のgridレイアウトを組むなどで repeat() による指定ができるなどであればこちらを採用すると良いです( grid-template を採用すると 1fr を 12回も書かなくてはいけなくなりますw)