Каталог
Веб-разработка с нуля: четыре курса по порядку.
HTML, затем CSS, JavaScript и SQL. Каждый курс говорит, что нужно знать до него и что вы будете уметь после.
Загружаем курсы…
Каталог
HTML, затем CSS, JavaScript и SQL. Каждый курс говорит, что нужно знать до него и что вы будете уметь после.
Загружаем курсы…
Урок 30 из 53 · 8 мин
auto-fill и auto-fit, неявные строки grid-auto-rows и grid-auto-columns, grid-auto-flow и dense.
Иногда в каталоге три товара, иногда двенадцать. И на телефоне тоже должно быть красиво.
Одна строка CSS: repeat(auto-fill, minmax(200px, 1fr)). Сколько колонок влезет — столько и будет.
auto-fill · auto-fitrepeat(auto-fill, minmax(200px, 1fr)) — столько колонок, сколько поместится. auto-fit растягивает элементы, если их мало.<style>
.g { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 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>5</div><div>6</div><div>7</div></div>grid-auto-rows<style>
.g { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 50px; 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>5</div><div>6</div></div>grid-auto-columns<style>
.g { display: grid; grid-auto-flow: column; grid-auto-columns: 80px; gap: 6px; overflow-x: auto; } .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>grid-auto-flowrow (по умолчанию), column, dense — заполнять дыры.<style>
.g { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-flow: dense; gap: 6px; } .w { grid-column: span 2; } .g > * { background: #fdf6ec; border: 1px solid #c8763a; padding: 6px; }
</style>
<div class="g"><div>1</div><div class="w">2 широкая</div><div class="w">3 широкая</div><div>4</div></div>repeat(auto-fill, minmax(…, 1fr)) — самая полезная строчка Grid. Запомни её.
Сделай .menu гридом с колонками repeat(auto-fill, minmax(200px, 1fr)) и промежутком 16px.
Выберите один ответ.
Что делает repeat(auto-fill, minmax(200px, 1fr))?
Выберите один ответ.
Зачем grid-auto-flow: dense?
Проверяем состояние обучения…