Модуль 4 · Урок 15
Grid tracks, sizing і auto-placement
Grid керує rows і columns разом. Надійна сітка починається з track plan: які tracks explicit, як вони мінімально й максимально розмірюються, що станеться з extra items і довгим content.
Lines/tracksfr + minmaxrepeatAuto-placement
Grid vocabulary
LineBoundary із номером або name.
TrackПростір між двома adjacent lines: row чи column.
CellПеретин одного row і column track.
AreaПрямокутник з однієї або кількох cells.
Explicit gridTracks із template.
Implicit gridTracks, створені для content поза explicit plan.
Track sizing contract
.catalog {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));
gap:1rem;
}fr ділить leftover space після non-flexible sizing. minmax() задає floor/ceiling. minmax(0,1fr) дозволяє track стискатися нижче content minimum, але content все одно має wrapping strategy. auto-fit може collapse empty repeated tracks; auto-fill зберігає їх.
Auto-placement без сюрпризів
| Case | Результат |
|---|---|
| Item без placement | Auto-placement кладе у наступну доступну cell |
| Item потребує track поза template | Створюється implicit track |
grid-auto-flow:dense | Може заповнювати holes візуально поза source sequence |
| Extra rows | grid-auto-rows задає їх sizing |
- Заповніть grid-track plan.
- Додайте четверту card і поясніть placement.
- Перевірте long title та unbreakable token без page overflow.
Офіційні джерела
Практична перевірка · урок 15 з 60
Закріпіть матеріал уроку
Три сценарні питання. Для зарахування уроку потрібно дати щонайменше дві правильні відповіді.