Summary of insights into traditional CSS Grid & Flexbox

Hello folks. Many CSS layout properties are interdependent and behave differently depending on how they are combined. A practical way to remember them is to mentally group properties based on the direction they control and whether they apply to the container or the items.

Inline Direction (left → right in most writing modes)

Properties beginning with justify- generally control alignment along the inline axis.

• justify-content

  Used on the container to align tracks (in grid) or flex items (in flexbox) along the inline axis when extra space is available.

• justify-items

  Used on the grid container to define the default alignment of grid items inside their grid cells along the inline axis.

• justify-self

  Used on a grid item to override justify-items for that specific item.

Block Direction (top → bottom in most writing modes)

Properties beginning with align- generally control alignment along the block axis.

• align-content

  Used on the container to align grid tracks or flex lines along the block axis when there is extra space.

• align-items

  Used on the container to set the default alignment of items along the cross axis.

  • In grid, the cross axis equals the block axis.
  • In flexbox, the cross axis depends on flex-direction.

• align-self

  Used on an individual item to override the align-items value for that item.

Restrictions / Differences

• justify-items does not work in flexbox. It only applies to grid containers.
• align-content works in both grid and flexbox, but in flexbox it only has an effect when there are multiple flex lines (e.g., when flex-wrap: wrap).
• With grid-auto-flow: row
  • Columns are determined by grid-template-columns.
  • If there are more items than available cells, new rows are automatically created.
• With grid-auto-flow: column
  • Rows are determined by grid-template-rows.
  • Extra items create new columns instead.

• grid-template-columns / grid-template-rows

  Define the explicit grid (the tracks you explicitly declare).

• grid-auto-columns / grid-auto-rows

  Define the size of implicitly created tracks when extra items require new rows or columns.

Dynamic Layout Patterns

These are common responsive grid patterns.

grid-template-columns: repeat(auto-fill, 200px)

• Creates columns of fixed width (200px).
• The browser fits as many columns as possible in the container.
• Extra space may remain at the end of the row.

grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))

• Each column is at least 200px but can grow.
• Remaining space is distributed using 1fr.
• When there is enough space for another 200px column, the browser adds a new column automatically.

Other Useful Notes

grid-template-areas: '. . .' '. . .'

Each string represents a row, and each value represents a column cell.

Example:

grid-template-areas:
'. . .'
'. . .';

This creates a 3-column × 2-row grid, but unlike grid-template-columns / grid-template-rows, it is mainly used to name layout areas, not just define track counts.

Track Sizing Keywords

When defining columns or rows:

• min-content

  Shrinks the track to the smallest size possible without overflowing. Text wraps as needed, typically down to the longest unbreakable word.

• max-content

  Expands the track so all content fits on one line (no wrapping). It does not grow further even if the container expands.

• fit-content(200px)

  Allows the track to grow to fit its content but never exceed 200px.

• auto

  Sizes the track based on content and available space. It behaves somewhat like minmax(min-content, max-content) but can also stretch when free space exists.

Conclusion

These random cheat-sheet style bullets can be handy for quick recall while coding, instead of revisiting a long article and forcing your brain through lots of context switching.

As usual, feel free to add more insights, point out mistakes, or share your own mental models for remembering CSS layout rules.