OnlineCBT
Share remaining track space with fr
The fr unit represents a flexible share of available grid space after other relevant track sizing. It is not simply a percentage of the entire container. repeat reduces repetition in a track list.
.equal-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1rem;
}
.split-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
gap: 1rem;
}The equal grid creates three flexible tracks. The split grid distributes flexible space in a 1:2 ratio, subject to track constraints. Gaps consume space separately; they are not extra percentages to add on top of a full-width calculation.
Why minmax(0,1fr) is useful
A plain 1fr track has an automatic minimum that can be influenced by content. A long unbreakable token can therefore keep the track wider than expected. minmax(0,1fr) permits a zero minimum while sharing available space. It does not automatically wrap the content inside the track.
Repeat syntax
grid-template-columns: repeat(4, 8rem);
/* Equivalent to four consecutive 8rem tracks. */
grid-template-columns: 12rem repeat(2, minmax(0, 1fr));The second rule creates a fixed first column followed by two flexible columns. Fixed widths are appropriate only when the available container can accommodate them or a responsive rule provides an alternative.
Do not confuse tracks with items
Three columns do not limit the grid to three items. Auto-placement puts additional items into following rows. Each item may also span tracks, so item count and column count are separate concepts.
Exercises and answers
- Create six cards in a three-column grid; expect two rows under ordinary placement.
- Change repeat(3,...) to repeat(2,...); expect three rows.
- Place a long URL in one card and compare 1fr with minmax(0,1fr), then add wrapping.
- Explain why 50% 50% plus a nonzero gap can overflow: the percentages already consume the full available width.
