Как вписать блоки в страницу или в контейнер? Используйте css grid

Я на днях обнаружил печальную вещь. Хотя стандарт css grid существует не первый год, многие до сих пор то ли не знают о нем, то ли не понимают, для чего он нужен. Я крайне редко вижу его практическое использование.

При этом существует задача, которая нормальным образом решается только через grid. Речь идет о вписывании верстки в родительский контейнер, будь то виджет или страница в целом. В итоге создание подобной верстки происходит либо с помощью костылей (если использовать обычную блочную верстку (когда ее уже пометят как obsolete?)), либо с помощью избыточного кода (если использовать flex). Давайте я покажу на пример, как это делать правильно.

Вот типичная задача - нужно сделать страницу с верхним и нижним тулбаром, и центром, который должен скроллится:

<style>
      .root {
        width: 100%;
        height: 100%;
        background-color: yellow;        
      }
      .toolbar1 {
        background-color: green;
      }
      .main {
        background-color: grey;
      }
      .main-big-content {
        background-color: black;
        height: 2000px;
      }
      .toolbar2 {
        background-color: cyan;
      }
    </style>
    <div class="root">
      <div class="toolbar1">
        <button>button1</button>
      </div>
      <div class="main">
        <div class="main-big-content">
        </div>
      </div>
      <div class="toolbar2">
        <button>button1</button>
      </div>
    </div>

Посмотрим на результат:

Разумеется, все неправильно! Нижний тулбар не виден. Ну ок, добавим 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;
      }
    </style>
    <div class="root">
      <div class="toolbar1">
        <button>button1</button>
      </div>
      <div class="main">
          <div class="main-2">
            <div class="toolbar2-1">
               <button>button2-1</button>
            </div>
            <div class="main-big-content">
            </div>
            <div class="toolbar2-2">
                <button>button2-2</button>
            </div>
        </div>
      </div>
      <div class="toolbar2">
        <button>button1</button>
      </div>
    </div>

Сверху и снизу мы хотим по две кнопки. Естественно, мы этого не получаем:

Придется опять писать кучу кода про флексы...

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-ом:

<style>
      html, body {
        height: 100%;
        padding: 0px;
        margin: 0px;
      }
      .root {
        width: 100%;
        height: 100%;
        background-color: yellow;   
        display: grid;
        overflow: hidden;
      }
      .toolbar1, .toolbar2-1 {
        background-color: green;
      }
      .main {
        background-color: grey;
        overflow: auto;
      }
      .main-big-content {
        background-color: black;
        height: 2000px;
      }
      .toolbar2, .toolbar2-2 {
        background-color: cyan;
      }
    </style>
    <div class="root">
      <div class="toolbar1">
        <button>button1</button>
      </div>
      <div class="toolbar2-1">
        <button>button2-1</button>
      </div>
      <div class="main">
        <div class="main-big-content">
        </div>
      </div>
      <div class="toolbar2-2">
        <button>button2-2</button>
      </div>
      <div class="toolbar2">
        <button>button1</button>
      </div>
    </div>

Идеально. Начинайте использовать grid-ы!