Featured: choosing Grid or Flexbox
Start from the content relationship. Choose Grid when rows and columns coordinate; choose Flexbox when content mainly follows one axis.
What this page combines
responsive Grid
repeat() + minmax()
full-width Grid item
flexible filters
column Flexbox
logical source order
The featured resource remains first in the HTML and spans the Grid. Each card becomes a Flexbox column so its metadata can stay aligned at the bottom.
Responsive track recipe
Combine auto-fit with minmax() to create columns that respond to available width without a media query.
Flexible card actions
Use grow, shrink, and basis values to let actions share a row and wrap when their labels need more space.
Item versus content alignment
Decide whether you need to move each item inside its cell or move the complete track collection inside the container.
Source-order checklist
Confirm that headings, links, and controls still follow a meaningful sequence before applying visual placement or order.
Why these choices?
The library uses repeat(auto-fit, minmax(16rem, 1fr)). Cards become equal-height Grid items, while each card's Flexbox column uses an automatic top margin to keep metadata aligned without fixed heights.