Каталог
Веб-разработка с нуля: четыре курса по порядку.
HTML, затем CSS, JavaScript и SQL. Каждый курс говорит, что нужно знать до него и что вы будете уметь после.
Загружаем курсы…
Каталог
HTML, затем CSS, JavaScript и SQL. Каждый курс говорит, что нужно знать до него и что вы будете уметь после.
Загружаем курсы…
Урок 28 из 53 · 9 мин
display: grid, grid-template-columns и rows, единица fr, repeat() и minmax().
Каталог — три колонки карточек одинаковой ширины.
Флекс — для одного ряда. Grid — для сетки в двух измерениях: колонки И строки сразу.
display: grid<style>
.g { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; } .g > * { background: #fdf6ec; border: 1px solid #c8763a; padding: 6px; }
</style>
<div class="g"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div></div>grid-template-columns200px 1fr 1fr.<style>
.g { display: grid; grid-template-columns: 80px 1fr 2fr; gap: 8px; } .g > * { background: #fdf6ec; border: 1px solid #c8763a; padding: 6px; }
</style>
<div class="g"><div>1</div><div>2</div><div>3</div></div>grid-template-rowsauto 1fr auto.<style>
.g { display: grid; grid-template-rows: 30px 60px; gap: 4px; } .g > * { background: #fdf6ec; border: 1px solid #c8763a; padding: 6px; }
</style>
<div class="g"><div>1</div><div>2</div></div>fr1fr 2fr — вторая колонка вдвое шире первой.<style>
.g { display: grid; grid-template-columns: 1fr 2fr; gap: 8px; } .g > * { background: #fdf6ec; border: 1px solid #c8763a; padding: 6px; }
</style>
<div class="g"><div>1fr</div><div>2fr</div></div>repeat()repeat(3, 1fr) = 1fr 1fr 1fr.<style>
.g { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; } .g > * { background: #fdf6ec; border: 1px solid #c8763a; padding: 6px; }
</style>
<div class="g"><div>1</div><div>2</div><div>3</div><div>4</div></div>minmax()minmax(200px, 1fr) — не уже 200px, но может расти.<style>
.g { display: grid; grid-template-columns: minmax(120px, 1fr) 2fr; gap: 8px; } .g > * { background: #fdf6ec; border: 1px solid #c8763a; padding: 6px; }
</style>
<div class="g"><div>1</div><div>2</div></div>Одномерный ряд — флекс. Сетка из колонок и строк — грид.
Сделай .menu гридом из трёх равных колонок (repeat(3, 1fr)) с промежутком 16px.
Выберите один ответ.
Что значит grid-template-columns: 1fr 3fr?
Выберите один ответ.
Что лучше подходит для сетки карточек в несколько строк и колонок?
Проверяем состояние обучения…