Gridの上下に空白を作りたい

グリッド全体の行間を調整したいなら row-gap を使う。
個別のアイテムごとに上下余白を調整したいなら margin、padding を使う。

gapは隣接するgridとの空白を考慮して、左右上下の端のように空白を意図していない箇所には空白を追加しない。賢い

divの中のimgにがあるときのクラス名

前提、CSS modules を使ってReactで開発しているとする。

こんなHTML構造があったとする

<div>
    <img src="/editImage" />
</div>

gridで制御したいからdivで囲むけど、わざわざimgContainerという名前をつけるのは大袈裟。そういうときはdivに内側のimgタグにつけたいeditImageというクラス名をつける。CSS 側では次のように書く。そうしたら２つクラス名をつけなくてもいい。

.editImage {
...
}

.editImage img {

}

左右の余白を上の階層のcssで決めておく

横の余白を決めるwidthを決めておいて、子以降のContainerは全て横幅を%とかgridのfrで指定したい。margin,padding,gridで決める3パターンがあるけど、個人的にmarginで左右の余白を決めておきたい

モダンコーディング p57

チェックボックスだけ右寄せしたい

• チェックボックスのグループをdivで囲む
• 列の配置を明示的にする

チェックボックスのグループをdivで囲むことによって、一つの大きなアイテムとみなせる。そのアイテムにさらにgrid/flexを適用することで整頓の中に追加の整頓を作れる。

列の配置を明示的にしている。次のように配置する列を2 / 3 に指定する。するとチェックボックスのグループは2分割した右半分に配置される。チェックボックス以降は何も要素を置かなければ自動的にチェックボックスの左半分は空白になる。

grid-column: 2 / 3;

テキスト入力の場合label⇨inputという順番になっているが、チェックボックスの場合input⇨labelの順になっている