Advanced Layout Techniques

Explore intrinsic sizing, subgrid, logical properties, writing modes, sticky layouts, and advanced component composition.

Intrinsic Sizing

Intrinsic sizing describes how elements determine their dimensions based on their content. min-content, max-content, and fit-content() provide more expressive sizing than simple fixed dimensions.

Intrinsic sizing is particularly useful for navigation labels, tables, cards, and responsive components.

Intrinsic Sizing

Intrinsic Grid Sizing

.layout {
  display: grid;
  grid-template-columns: max-content 1fr;
}

.sidebar {
  width: fit-content;
  max-width: 20rem;
}

💡 The first column can size itself around its content while the second column consumes remaining space.

Key Takeaways

Intrinsic sizing lets content participate directly in layout decisions.
min-content and max-content represent different intrinsic constraints.

Knowledge Check

What does `max-content` generally represent?

Subgrid

Subgrid allows a nested grid to participate in the track sizing of its parent grid. This is valuable when repeated cards need internal content aligned across the entire card collection.

Without subgrid, each card's internal grid may size independently, making cross-card alignment harder.

Subgrid Alignment

Card Subgrid

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.card {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
}

💡 The card can participate in the parent's row sizing, allowing corresponding content regions to align.

Key Takeaways

Subgrid allows nested layouts to inherit parent grid tracks.
It is useful for consistent alignment across repeated components.

Knowledge Check

What problem does CSS Subgrid help solve?

Sticky Positioning

position: sticky behaves like relatively positioned content until a scroll threshold is reached, after which it sticks within its containing scroll context.

Sticky positioning is useful for table headers, side navigation, filters, and section headings. Ancestor overflow settings can affect sticky behavior.

Sticky Positioning

Sticky Sidebar

.sidebar {
  position: sticky;
  inset-block-start: 1rem;
  align-self: start;
}

💡 The sidebar remains in normal flow but sticks when scrolling reaches the specified inset.

Key Takeaways

sticky combines normal-flow positioning with scroll-based sticking.
Containing blocks and ancestor overflow can affect sticky behavior.

Knowledge Check

What is a typical use case for `position: sticky`?

Logical Properties and Writing Modes

Logical properties describe layout in terms of inline and block directions instead of physical left, right, top, and bottom directions. This supports writing modes such as right-to-left languages and vertical writing.

Examples include margin-inline, padding-block, inset-inline-start, and border-block-end.

Logical CSS Directions

Writing-Mode Friendly CSS

.card {
  margin-inline: auto;
  padding-block: 1.5rem;
  padding-inline: 1rem;
  border-block-end: 1px solid #cbd5e1;
}

💡 Logical properties adapt to the document's writing direction.

Key Takeaways

Logical properties improve internationalization.
Think in terms of block and inline axes.

Knowledge Check

Which is a logical alternative to `margin-left`?

Intrinsic Sizing

Subgrid

Sticky Positioning

Logical Properties and Writing Modes

STAY UPDATED WITH BYTES!