kf-g-css-flex-grid

CSS Grid / Flex Layout Rules

This skill treatsdisplay: grid as the first candidate while narrowing down wheredisplay: flex should be used, and is for mapping visual placement directly into code. grid-templateIt mainly handlesgrid-area , empty cells,flex-direction naming, and the choice of ../kf-g-css-tak-responsive-rules/SKILL.md . For breakpoints, Container Queries, and fluid size unit selection, prioritizegap と margin , and for the separation of responsibilities of ../kf-g-css-spacing-gap-margin-rules/SKILL.md .

When to use this skill

display: grid と display: flex When deciding which of
grid-template と grid-template-areas to choose
grid-area When reviewing which of
to write with grid When deciding the naming rules for
When considering whether a vertical stacking layout can be expressed with flex When checking whether AI-generated CSS contains ad-hoc

What to decide first

Whether that element should really be a layout container
Whether the visual placement can be expressed as-is with grid-template Whether
flex is needed only for alignment in a single column direction
Whether layout names and appearance class names should be separated

Selection order

Normal flow

Do not casually add grid や flex to elements that work with document flow alone.
If headings, body text, and simple vertical stacking flow naturally, it is fine to first leave them in normal flow.

Grid

For layouts that are more natural to think about in terms of row and column relationships, such as sections, cards, media objects, forms, and information panels, make grid the first candidate.
If you want to explain the appearance as a diagram, first consider whether it can be written with grid-template .
Even in cases where it looks like you just want to stack elements vertically,gap, start positions, and future reordering often make grid less prone to breaking.

Flex

flex Use
only for single-row alignment, space-between, centering, and light wrapping arrangements.
flex Typical examples are button groups, chip rows, toolbars, navigation, and inline-direction action groups. grid is that one-directional distribution or alignment is sufficient, and once two-dimensional placement or whitespace design becomes the main topic, return to

Grid rules

`grid-template` Make

the top priority grid-template When building a layout, first consider whether it can be expressed visually with
grid-template-areas . grid-template over
. Because area names and track sizes can be written in the same place, the correspondence between appearance and implementation is less likely to break down.
Within row strings, use spaces so that columns align visually.

.feature {
  display: grid;
  gap: 1rem 1.5rem;
  grid-template:
    "...     title" auto
    "media   body " auto
    "media   meta " auto
    / 12rem 1fr;
}

Use empty grid cells

If whitespace is part of the layout, actively use empty grid cells.
Use empty cells not as a substitute for margins, but to make the structure explicit.
gap と margin The proper use of ../kf-g-css-spacing-gap-margin-rules/SKILL.md refer to

`grid-area` The name is held in `[grid-area]` with

Do not use the class name as-is as the source for the grid-area name.
Use class as a selector for appearance and responsibility, and separate the layout surface name into the [grid-area] attribute.
[grid-area] Name the value of
Do not pour BEM names or decorative classes directly into surface names.
If you place a common rule,* not :where([grid-area]) limit to
[grid-area] The performance concern for a common rule limited togrid-area itself only applies to grid items.
However,attr() を content Typed syntax used outside of@supports limited to progressive enhancement with

<section class="feature">
  <h1 class="feature-title" grid-area="title">タイトル</h1>
  <div class="feature-media" grid-area="media">...</div>
  <p class="feature-body" grid-area="body">...</p>
</section>

@supports (grid-area: attr(grid-area type(<custom-ident>), auto)) {
  :where([grid-area]) {
    grid-area: attr(grid-area type(<custom-ident>), auto);
  }
}

By separating the responsibility of surface names from class, changing appearance class names is less likely to drag in the layout definition.
For projects that want broad support including Safari and Firefox, do not assume this common rule, and have individual grid-area declarations as a fallback.

Flex rules

`flex` limit to horizontal single-row alignment

If single-axis arrangement and distribution alone are sufficient, flex may be used.
When you want to use justify-content、align-items、flex-wrap in a horizontal row, flex is natural.
However, once you start caring about the relationship between wrapped rows or column-direction alignment, return to grid .

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

AI output checklist

grid-template Even though it can be written withgrid-template-areas are the row and column definitions not separated?
Are the spaces in the row strings broken, making the column correspondence hard to read?
grid-area Are you reusing the
grid-area Are you not applying the common rule of * to[grid-area] Are you limiting it to
typed attr() Even though you assume the use of @supports are you ignoring supported browsers or
flex Are you forcing a two-dimensional layout with

Policy for output

First, state in one sentence which of grid と flex you choose and why.
grid If you choosegrid-template first show the visual structure with
flex If you choose
[grid-area] If you use
[grid-area] If you use the common rule of[grid-area] State explicitly whether it is qualified.
If spacing responsibility is the issue, ../kf-g-css-spacing-gap-margin-rules/SKILL.md Use together.

Final check

For elements that are sufficient with the normal flow, grid や flex Is it not added?
Visual placement grid-template Even though it can be expressed with , are you not escaping to another notation?
Are the spaces in the row strings aligned so that the columns are easy to read?
grid-area Is the name separated into [grid-area] ?
typed attr() For common rules that use , :where([grid-area]) Limit to ,@supports Is there a condition of or guaranteed supported browsers?
flex Is limited to horizontal single-row alignment?

Reference materials

Promote spacing design using empty grid cells