Каталог
Веб-разработка с нуля: четыре курса по порядку.
HTML, затем CSS, JavaScript и SQL. Каждый курс говорит, что нужно знать до него и что вы будете уметь после.
Загружаем курсы…
Каталог
HTML, затем CSS, JavaScript и SQL. Каждый курс говорит, что нужно знать до него и что вы будете уметь после.
Загружаем курсы…
Урок 31 из 53 · 9 мин
justify-items, justify-self, place-items, place-content, place-self и subgrid.
В карточках разной длины описания, но цены и кнопки должны стоять на одной линии.
subgrid даст вложенной сетке те же строки, что у родителя. И всё совпадёт.
justify-itemsstart, center, stretch.<style>
.g { display: grid; grid-template-columns: repeat(3, 1fr); justify-items: center; 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>justify-self<style>
.g { display: grid; } .r { justify-self: end; } .g > * { background: #fdf6ec; border: 1px solid #c8763a; padding: 6px; }
</style>
<div class="g"><div class="r">Справа</div></div>place-itemsplace-items: center = align-items + justify-items.<style>
.box { display: grid; place-items: center; height: 70px; background: #fdf6ec; }
</style>
<div class="box">По центру</div>place-content<style>
.g { display: grid; grid-template-columns: repeat(2, 60px); place-content: center; height: 80px; gap: 4px; background: #fffaf3; } .g > * { background: #fdf6ec; border: 1px solid #c8763a; padding: 6px; }
</style>
<div class="g"><div>1</div><div>2</div></div>place-selfplace-self: center для одного элемента.<style>
.g { display: grid; height: 60px; } .c { place-self: center; } .g > * { background: #fdf6ec; border: 1px solid #c8763a; padding: 6px; }
</style>
<div class="g"><div class="c">Центр</div></div>subgridgrid-template-rows: subgrid — вложенный грид берёт строки родителя.<style>
.g { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; } .card { display: grid; grid-row: span 3; grid-template-rows: subgrid; background: #fdf6ec; padding: 6px; }
</style>
<div class="g"><div class="card"><b>Пенал</b><span>Короткое</span><button>290 ₽</button></div><div class="card"><b>Ручка</b><span>Очень длинное описание в несколько строк текста</span><button>220 ₽</button></div></div>Хочешь, чтобы части разных карточек совпадали по линиям, — subgrid.
Отцентруй содержимое .badge по обеим осям через грид: display: grid и place-items: center.
Выберите один ответ.
Как одной строкой отцентровать содержимое грид-контейнера по обеим осям?
Выберите один ответ.
Зачем subgrid?
Проверяем состояние обучения…