От автора: возможно, вы слышали о CSS Grid, так давайте попробуем его. Может быть, вы не знали, с чего начать. Как учить CSS Grid? Rachel сделала замечательную серию демонстраций по Grid. Как только вы изучите основы, вам будет сложно понять, где использовать сетки. На днях я игрался с сетками и наткнулся на довольно простой пример
Например, вам нужно создать две колонки. Я создавал базовый двухколоночный макет для резюме на моем сайте. Макет был примерно следующим:
Довольно просто, так ведь? Основная колонка и сайдбар. До сегодняшнего дня для создания подобного макета мы использовали хаки Float и даже Flexbox. Забавно, что даже Flexbox не до конца подходит под такой макет. Идеальное решение – Grid. С Flexbox вам пришлось бы писать примерно следующий код:
|
1 2 3 4 5 6 7 8 9 |
<div class="wrapper"> <section class="main-column"> Your content here. </section> <aside class="sidebar"> Your sidebar content here. </aside> </div> |
CSS был бы примерно таким:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.wrapper { display: flex; } .main-column { width: 70%; /* Обойдем box-model и используем padding */ padding-right: 2rem; } .sidebar { width: 30%; } |
Это только скелет. Метод выше требует 10 строк кода для базового макета. Теперь давайте сделаем это на Grid с тремя строками.
|
1 2 3 4 5 |
.wrapper { display: grid; grid-template-columns: 70% 30%; grid-gap: 2rem; } |
И все. Grid слегка пугает, но его простота и универсальность сделают его потрясающим инструментом. Пока что Grid поддерживается только через флаги в браузерах, давайте напишем фолбэк.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
/* Если браузер поддерживает Grid, используется код ниже */ @supports (display: grid) { .wrapper { display: grid; grid-template-columns: 70% 30%; grid-gap: 2rem; } } /* Если браузер не поддерживает Grid, используется код ниже */ @supports not (display: grid) { .wrapper { display: flex; } .main-column { width: 70%; padding-right: 2rem; } .sidebar { width: 30%; } } |
Автор: Timothy B. Smith
Источник: //theboldreport.net/
Редакция: Команда webformyself.
