CSS Grid / Flex レイアウトルール

この skill は、display: grid を第一候補にしつつ、display: flex の使いどころを絞り、視覚配置をコードへそのまま写すためのものです。 grid-template、空セル、grid-area 命名、flex-direction の選択を主に扱います。 ブレイクポイント、Container Queries、流体サイズの単位選定は ../kf-g-css-tak-responsive-rules/SKILL.md を優先し、gap と margin の責務分離は ../kf-g-css-spacing-gap-margin-rules/SKILL.md を優先します。

この skill を使う場面

• display: grid と display: flex のどちらを選ぶか決めるとき
• grid-template と grid-template-areas のどちらで書くか見直すとき
• grid-area の命名ルールを決めるとき
• 縦積みレイアウトを grid で表現できないか検討するとき
• AI が生成した CSS に、場当たり的な flex が混ざっていないか確認するとき

最初に決めること