Summary of insights into traditional CSS Grid & Flexbox

Source: Dev.to

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.

Note: 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).

Grid auto‑flow

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.

Defining tracks

• 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.

Common responsive grid patterns

/* Fixed‑width columns, fill the container */
grid-template-columns: repeat(auto-fill, 200px);

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

/* Flexible columns with a minimum size */
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

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

Grid template areas

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

• Each string represents a row, and each value represents a column cell. This creates a 3‑column × 2‑row grid. grid-template-areas is mainly used to name layout areas rather than just define track counts.

Track sizing keywords

• 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 200 px.
• 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.

---

These 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.

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