Учим CSS Grid за 5 минут

https://medium.freecodecamp.org/learn-css-grid-in-5-minutes-f582e87b1228
  • Перевод
Быстро познакомимся с будущим макетов веб-сайтов.

image

Grid макеты имеют основополагающее значение для дизайна веб-сайтов, а модуль CSS Grid — это самый мощный и простой инструмент для его создания.

В этом году модуль также получил нативную поддержку основных браузеров (Safari, Chrome, Firefox), поэтому я считаю, что всем фронтенд разработчикам придется изучать эту технологию в недалеком будущем.

В этой статье я быстренько расскажу вам об основах CSS Grid.

Я также работаю над созданием углубленного курса CSS Grid, который я начну бесплатно в декабре. Ознакомиться с превью курса здесь.

image

Ваш первый CSS Grid макет


Двумя основными компонентами CSS Grid являются обертка(Родитель) и элементы (Дети). Обертка — это фактически сетка, а элементы — это содержимое внутри сетки.

Вот разметка для обертки с шестью элементами в ней:

<div class="wrapper">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

Чтобы превратить нашу обертку div в сетку, мы просто дадим ей отображение grid:

.wrapper {
    display: grid;
}

Но это пока ничего не делает, поскольку мы не определили, как мы хотим, чтобы наша сетка выглядела. Сейчас это просто складывает 6 div друг на друга.

image

Я добавил немного стилей, но это не имеет ничего общего с CSS Grid.

Столбцы и строки


Чтобы сделать его двумерным, нам нужно определить столбцы и строки. Давайте создадим три столбца и две строки. Мы будем использовать свойства grid-template-row и grid-template-column.

.wrapper {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 50px 50px;
}

Поскольку мы написали три значения для grid-template-columns, мы получим три столбца. И мы получим две строки, так как мы указали два значения для grid-template-rows.

Значения определяют широту наших столбцов (100px) и высоту для наших строк (50px). Вот результат:

image

Чтобы убедиться, что вы правильно понимаете взаимосвязь между значениями и как выглядит сетка, взгляните на этот пример.

.wrapper {
    display: grid;
    grid-template-columns: 200px 50px 100px;
    grid-template-rows: 100px 30px;
}

Попытайтесь понять связь между кодом и макетом.

Вот как это выглядит:

image

Расположение элементов


Следующее, что вам потребуется узнать, как разместить элементы на сетке. Здесь вы получаете сверхспособности, так как создавать макеты очень просто.

Давайте создадим сетку 3x3, используя ту же разметку, что и раньше.

.wrapper {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px 100px;
}

Это приведет к следующему макету:

image

Заметьте, мы видим только сетку 3x2 на странице, в то время как мы определили ее как сетку 3x3. Это потому, что у нас есть только шесть элементов, чтобы заполнить сетку. Если бы у нас было еще три, то и нижняя строка была бы заполнена.

Для позиционирования и изменения размера элементов мы будем указывать их и использовать свойства grid-column и grid-row:

.item1 {
    grid-column-start: 1;
    grid-column-end: 4;
}

Здесь мы говорим о том, что мы хотим, чтобы item1 начинался с первой линии сетки и заканчивался на четвертом столбце. Другими словами, это займет всю строку. Вот как это будет выглядеть на экране:

image

Вы, наверное, в замешательстве, почему у нас 4 столбца, когда у нас есть только 3 столбца. Взгляните на это изображение, где я отобразил линии столбцов черным:

image

Обратите внимание, что теперь мы используем все строки в сетке. Когда мы сделали чтобы первый элемент занимал весь первый ряд, он сдвинул остальные элементы вниз.

Наконец, я хотел бы показать более простой синтаксис для примера выше:

.item1 {
    grid-column: 1 / 4;
}

Чтобы убедиться, что вы правильно поняли эту концепцию, давайте немного перестроим элементы.

.item1 {
    grid-column-start: 1;
    grid-column-end: 3;
}

.item3 {
    grid-row-start: 2;
    grid-row-end: 4;
}

.item4 {
    grid-column-start: 2;
    grid-column-end: 4;
}

Вот как это выглядит на странице. Попытайтесь понять почему это выглядит так. Это не должно быть слишком сложно.

image

Вот и все.

P.S.
Продолжение «Как быстро спроектировать сайт с помощью CSS Grid».



Перевод выполнен при поддержке компании EDISON Software, которая профессионально занимается разработкой сайтов государственных учреждений на Битриксе и создает полезное веб-приложение для администрирования электронной библиотеки.
Edison 91,47
Изобретаем успех: софт и стартапы
Поделиться публикацией
Комментарии 14
  • +1
    Класс wrapper в разметке есть, а где классы item?
    • 0
      Их нужно присвоить элементам в родительском контейнере (детям)
    • +1
      Через сколько лет это можно будет свободно использовать, не опасаясь того, что у четверти посетителей браузеры сетку не поддерживают?
      • +2
        Даю примерно 3 месяца — экспериментальные билды поддержку внесли прошедшей весной-летом. Этой осенью уже идет в релиз-ветках. К новой весне должны обновиться все остальные юзеры.

        Моё web-application на них уже построено.
        • +1

          can i use пишет, то css grid поддерживается всеми десктопными браузерами, кроме IE/Edge.

          • +1

            https://caniuse.com/#feat=css-grid вообще edge уже полноценно поддерживает. IE 10/11 и старые edge – partial support (с префиксом и по старой спецификации)

            • 0
              Я понимаю это. Мой ответ был скорее о том, что уж за следующие 3 месяца вся остальная значительная масса таки успеет быть гарантированно с обновленными браузерами.
              • 0

                какая остальная масса? IE/Edge? не думаю.

                • 0
                  Естественно, масса людей — по самым различным причинам так или иначе может затягиваться на какое-то время процесс обновления. А Edge и так поддерживает почти полностью гриды.
            • +2

              Вообще-то экспериментальная поддержка за флагом была еще в 2015-м, а поддержку в релиз-ветках «большая четверка» дружно выкатила еще в марте, в октябре к ним еще присоединились Edge 16 и Samsung Internet 6. Плюс в IE10(!) — Edge 15 своя старая версия за префиксом (без «вкусностей» типа repeat:auto-fill и grid-gap, но во многих простых случаях существенно лучше, чем ничего). «Хромята» типа Я-Браузера (которые canIUse не учитывает, так что к его статистике для экс-СССР можно смело плюсовать еще процентов 5-7) обычно поддерживают то же, что и Хром предпоследней версии — т.е. у них тоже всё хорошо.


              Осталась проблема со всякими Операми-в-Мини и UC Browser'ами, до которых гриды могут не дойти и через 2-3 года (но это не проблема, т.к. это мобильные браузеры, а значит, им более чем уместна упрощенная одноколоночная раскладка:) и с совсем уж древними IE, в которых, очевидно, гриды не появятся никогда (но они, во-первых, практически вымерли, а во-вторых, работают на настолько древнем железе, что упрощенная раскладка им тоже скорее поможет, чем повредит, так что и они проблема только для тех, у кого «сайты везде должны выглядеть одинаково»:).

            • 0

              Не обязательно делать так, чтобы картинка была во всех браузерах одинаковая, главное чтобы сайт был юзабельный. Если кто-то не поддерживает грид, там будет отображаться как на картинке в начале статьи. Ничего никуда не едет, смотрится ровно. А в браузерах с поддержкой гридов всё расположится чуть по-другому.


              У меня есть дашборд, сделанный на CSS-grid. Верстка получилась намного проще и чище, никаких лишних div-ов. Под IE люди тоже заходят и даже не замечают, что здесь не так.

            • 0
              Жду когда грид наконецто будет поддерживаться на всех платформах.
              Технологии должны облегчать жизнь и грид как раз из таких технологий.
              Я как ребенок радовался флексу, а когда узнал про грид, вообще пригал как маленький мальчик и кричал «ну когда же».
              • +1
                Есть очень интересный ресурс по css grid.

                Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                Самое читаемое