CSS Layout Grids

CSS Layout Grids

6.28%

Макет

    <div class="grid">
          <div>One</div>
          <div>Two</div>
          <div>Three</div>
          <div>Four</div>
          <div>Five</div>
        </div>
      

Включаем гриды

      .grid {
        display: grid;
      }
    

Теперь точно включаем

      .grid {
        display: grid;
        grid-template-columns: 200px 200px 200px;
      }
    

А с строками так

      .grid {
        display: grid;
        grid-template-rows: 75px 75px;
      }
    

Объеденяем

      .grid {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 75px 75px;
      }
    

Для всех сразу

      .grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: 75px;
      }
    

И это все?

Нет. Идем дальше

Немного усложняем макет

        <div class="grid">
          <div class="box1">One</div>
          <div class="box2">Two</div>
          <div class="box3">Three</div>
          <div class="box4">Four</div>
          <div class="box5">Five</div>
        </div>
      

Вот тут уже непонятно

      .grid {
        grid-auto-rows: 100px;
      }
      .box1 {
        grid-column-start: 1;
        grid-row-start: 3;
        grid-row-end: 5;
      }
    

Сложно?

Немного проще

      .box1 {
        grid-column: 1;
        grid-row: 3 / 5;
      }
    

Еще немного проще

      .box1 {
        grid-column: 1;
        grid-row: 3 / span 2;
      }
    

В одну строку

      .box1 {
        grid-area: 3 / 1 / 5 / 2;
      }
    

И еще, так можно

      .grid {
        grid-template-columns:
        [main-start] 1fr [content-start] 1fr
        [content-end] 1fr [main-end];
        grid-template-rows:
        [main-start] 50px [content-start]
        50px [content-end] 100px [main-end];
      }
    

      .box1 {
        grid-column-start: main-start
        grid-row-start: main-end
        grid-row-end: content-end
      }
    

Отступы

Отступ для колонок

      .grid {
        grid-column-gap: 10px;
      }
    

Отступ для строк

      .grid {
        grid-row-gap: 10px;
      }
    

Общий отступ

      .grid {
        grid-gap: 10px;
      }
    

Выравнивание

Пример выравнивания

      .grid {
        grid-auto-rows: 75px;
      }
      .box1 {
        align-self: center;
      }
    

А как с "заполнением"?

С "заполнением" все просто

      .grid {
        grid-template-columns: repeat(auto-fill, 200px)
      }
    

А грид в гриде, можно?

Можно

Собственно делаем грид в гриде

        <div class="grid">
          <div class="box box1">One</div>
            <div class="nested">Two</div>
            <div class="nested">Three</div>
            <div class="nested">Four</div>
          </div>
        </div>
      

      .grid {
        ...
        grid-auto-rows: minmax(50px, auto);
      }
      .box1 {
        grid-column-start: 1;
        grid-column-end: 1;
      }
    

Площади

Даем имена площадям

      .box1 {
        grid-area: box1;
      }
      .box2 {
        grid-area: box2;
      }
    

Делаем разметку

      .grid {
        grid-template-areas:
        "box1 box2 box2";;
      }
    

Можно объеденить с grid-template-columns

      .grid {
        grid:
        "box1 box2 box2"
        / 1fr 1fr 1fr;;
      }
    

Покрутим грид

      .grid {
        grid-auto-flow: column
      }
    

Конец