Как вписать блоки в страницу или в контейнер? Используйте css grid
Я на днях обнаружил печальную вещь. Хотя стандарт css grid существует не первый год, многие до сих пор то ли не знают о нем, то ли не понимают, для чего он нужен. Я крайне редко вижу его практическое использование.
При этом существует задача, которая нормальным образом решается только через grid. Речь идет о вписывании верстки в родительский контейнер, будь то виджет или страница в целом. В итоге создание подобной верстки происходит либо с помощью костылей (если использовать обычную блочную верстку (когда ее уже пометят как obsolete?)), либо с помощью избыточного кода (если использовать flex). Давайте я покажу на пример, как это делать правильно.
Вот типичная задача — нужно сделать страницу с верхним и нижним тулбаром, и центром, который должен скроллится:
Посмотрим на результат:
Разумеется, все неправильно! Нижний тулбар не виден. Ну ок, добавим overflow к центру:
.main {
background-color: grey;
overflow: auto,
}
Никакого эффекта.
Что ж, давайте использовать flex. Для этого придется усложнить код, добавив flex-direction: column, flex: 1 и т. д.:
.root {
width: 100%;
height: 100%;
background-color: yellow;
display: flex;
flex-direction: column
}
.toolbar1 {
background-color: green;
}
.main {
background-color: grey;
overflow: auto;
flex: 1;
}
.main-big-content {
background-color: black;
height: 2000px;
}
.toolbar2 {
background-color: cyan;
}
Да что за ерунда? А, ну конечно. Body тоже скроллится. Ладно, добавим ограничителей:
html,body {
height: 100%;
padding: 0px;
margin: 0px;
}
Да, теперь работает нормально. Вот только код стал, мягко говоря, немаленьким
html, body {
height: 100%;
padding: 0px;
margin: 0px;
}
.root {
width: 100%;
height: 100%;
background-color: yellow;
display: flex;
flex-direction: column
}
.toolbar1 {
background-color: green;
}
.main {
background-color: grey;
overflow: auto;
flex: 1;
}
.main-big-content {
background-color: black;
height: 2000px;
}
.toolbar2 {
background-color: cyan;
}А теперь представьте что у вас внутри каждого блока есть свои блоки, и если не добавлять в каждый display: flex, flex-direction: column и flex: 1, все разъедется! Но давайте не извращаться и все сделаем по-нормальному:
html, body {
height: 100%;
padding: 0px;
margin: 0px;
}
.root {
height: 100%;
background-color: yellow;
display: grid;
grid-template-rows: min-content auto min-content
}
.toolbar1 {
background-color: green;
}
.main {
background-color: grey;
overflow: auto;
}
.main-big-content {
background-color: black;
height: 2000px;
}
.toolbar2 {
background-color: cyan;
}
Все просто, понятно и без лишнего кода.
Я вас еще не убедил? Давайте усложним задачу. И внутри нашей структуры сделаем еще одну такую же структуру. Для начала воспользуемся flex-ом:
html, body {
height: 100%;
padding: 0px;
margin: 0px;
}
.root {
width: 100%;
height: 100%;
background-color: yellow;
display: flex;
flex-direction: column
}
.toolbar1 {
background-color: green;
}
.main {
background-color: grey;
overflow: auto;
flex: 1;
}
.main-big-content {
background-color: black;
height: 2000px;
}
.toolbar2 {
background-color: cyan;
}
Сверху и снизу мы хотим по две кнопки. Естественно, мы этого не получаем:
Придется опять писать кучу кода про флексы…
html, body {
height: 100%;
padding: 0px;
margin: 0px;
}
.root {
width: 100%;
height: 100%;
background-color: yellow;
display: flex;
flex-direction: column
}
.toolbar1, .toolbar2-1 {
background-color: green;
}
.main {
background-color: grey;
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
}
.main-2 {
background-color: grey;
overflow: auto;
flex: 1;
}
.main-big-content {
background-color: black;
height: 2000px;
}
.toolbar2, .toolbar2-2 {
background-color: cyan;
}
Все работает. Но посмотрите какой ценой!
Давайте перепишем на grid:
html, body {
height: 100%;
padding: 0px;
margin: 0px;
}
.root {
width: 100%;
height: 100%;
background-color: yellow;
display: grid;
grid-template-rows: min-content auto min-content;
}
.toolbar1, .toolbar2-1 {
background-color: green;
}
.main {
background-color: grey;
display: grid;
grid-template-rows: min-content auto min-content;
overflow: hidden;
}
.main-2 {
background-color: grey;
overflow: auto;
}
.main-big-content {
background-color: black;
height: 2000px;
}
.toolbar2, .toolbar2-2 {
background-color: cyan;
}Все намного проще! А результат такой же:
А знаете в чем прикол? grid-template-rows на самом деле не нужны. Браузер умный, он сам справится:
html, body {
height: 100%;
padding: 0px;
margin: 0px;
}
.root {
width: 100%;
height: 100%;
background-color: yellow;
display: grid;
}
.toolbar1, .toolbar2-1 {
background-color: green;
}
.main {
background-color: grey;
display: grid;
overflow: hidden;
}
.main-2 {
background-color: grey;
overflow: auto;
}
.main-big-content {
background-color: black;
height: 2000px;
}
.toolbar2, .toolbar2-2 {
background-color: cyan;
}
Все равно все работает!
И да, вы конечно меня сейчас спросите: «А зачем тебе вложенные друг в друга grid-ы? Почему не обойтись одним?». И ответ: в данном случае можно обойтись. Но существуют ситуации, когда вы вынуждены использовать вложенные контейнеры, например, когда вы внутри виджета. Но давайте упростим код и обойдемся одним grid-ом:
Идеально. Начинайте использовать grid-ы!
