Mozilla Toolbox в работе с CSS Grid

В предыдущей статье я упомянул еще один инструмент разработки - Mozilla Toolbox. Как вы поняли, это девелоперский инструмент в браузере Mozilla Firefox. Основной принцип работы в нем идентичен гугловским Dev Tools. Однако, есть кое-что особенное в Mozilla Toolbox, из-за чего с этим добром стоит ознакомиться - более тонкая работа с CSS Grid.

В чем прикол?

Вообще, выбор инструмента должен осуществляться, исходя из задач, с которыми мы чаще всего сталкиваемся на работе или учебе. Поэтому я в первую очередь рассказал о Google Chrome Dev Tools - по мне, это самый удобный инструмент для эффективного решения часто повторяющихся задач.

CSS Grid появились относительно недавно. Добавим сверху еще долгое время внедрения поддержки этого модуля во всех свежих версиях браузера - получим интересную картину. Из-за огромного количества созданных проектов не на CSS Grid многие разработчики (да и верстальщики тоже) до сих пор толком не разобрались с этим модулем (кто-то вообще до сих пор может верстать на флоатах), потому что поддержка легаси кода - дело энергозатратное, и не факт, что остаются силы на изучение и внедрение нового. Да и не факт, что CSS Grid подойдут в любом проекте. Все-таки этот модуль слишком мощный для простых макетов. Поэтому, как мне кажется, ребята с гугла не сильно заморачиваются с удобной работой с CSS Grid, хотя, как мы выяснили, минимальная поддержка там все-таки есть. Я даже больше скажу - этой поддержки достаточно в большинстве случаев использования CSS Grid.

Так почему все-таки нужно познакомиться с Mozilla Toolbox? Если вы хотите действительно разобраться с CSS Grid, вам нужно понимать работу абсолютно всех свойств. А если браузер не может показать вам результат работы этих свойств, то и понимание будет неполным.

Мы остановились на изучении свойств grid контейнера, оставив на потом парочку необычных. Чтобы покончить с ними, давайте посмотрим на работу с CSS Grid в браузере Mozilla Firefox.

Mozilla Toolbox

Как я уже сказал, особых отличий от других браузерных инструментов здесь нет. Вызывается на F12, имеются различные вкладки для работы. Верстальщика интересует вкладка "Inspector" ("Elements" в Chrome Dev Tools).

Чтобы изучить тонкости работы с CSS Grid, создайте файл "index.html" и вставьте в него следующий код:

Теперь откройте этот файл в браузере Mozilla Firefox и нажмите F12. Вы должны увидеть следующее:

Обратите внимание, что справа от элемента "<div class="container"></div>" стоит плашечка "grid", говорящая о том, что браузер увидел наш grid контейнер. Выберите этот элемент - справа у вас появится секция со стилями. Нам нужно активировать работу с гридом - для этого нужно нажать на символ решетки:

Теперь вы должны увидеть линии грида:

Кроме этого дефолтного поведения, мы можем дополнительно настроить еще парочку вещей. Например, следующая опция при включении покажет нам номера линий сетки:

Обратите внимание, что линии пронумерованы как слева направо (и сверху вниз в случае строк) с использованием положительных чисел, так и справа налево (снизу вверх) с использованием отрицательных чисел.

Ниже включатора линий находится опция включения отображения имен областей сетки, которые задаются свойством "grid-template-areas" (писал об этом свойстве здесь):

Последняя опция отобразит бесконечные линии (а не только границы сетки):

Под этими опциями находится так называемый "mini grid view" - уменьшенная копия грида с идентичным разделением. При наведении курсора мыши на маленькую область автоматически выделяется эта же область в большом гриде:

Внимательные читатели могли заметить, что есть три вида линий: сплошные, прерывистые и точечные:

Со сплошной и прерывистой все понятно: сплошные показывают внешние линии сетки (границы), прерывистые показывают внутренние линии (границы ячеек). Что это за загадочная точечная линия в самом низу сетки?

Мы подобрались к одной из самых крутых фишек гридов. Мы говорили о том, что CSS Grid состоит из свойств контейнера и его непосредственных потомков. Мы поняли, как задавать макет сетки с помощью свойств "grid-template-columns", "grid-template-rows", "grid-template-areas" и "grid-template". Мы еще не разобрали свойства потомков, но авансом скажу, что в них можно конкретно задать расположение каждого элемента внутри сетки (например, один элемент будет занимать место по горизонтали от первой до пятой вертикальных линий, второй с пятой по седьмую, третий займет оставшееся место). То есть, мы можем гибко организовать сетку, если мы точно знаем, как выглядит макет.

Но что будет, если макет нам неизвестен досконально? Или мы хотим генерировать сетку динамически? Или мы не учли нюансы при изучении макета, все четко задали, но нужно теперь немного подправить косяки? На помощь приходят свойства для автоматически добавляемых строк и столбцов.

Самое интересное, что в нашем примере нет ни единого такого свойства, но CSS Grid все равно добавил десятый элемент (с цифрой "10" который) в сетку, используя дефолтные настройки. Посмотрите еще раз внимательно на стили грида:

Мы задали сетку 3 на 3, но вставили внутрь контейнера десять элементов. Девять из них встали ровно по шаблону, как мы задали. А десятый разместился автоматически в четвертой строке. И Toolbox прекрасно это понял, отобразив нижнюю границу точечной линией. В терминологии гридов автоматически добавляемые линии называются неявными, а с помощью конкретных свойств - явными (спасибо, Кэп).

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

Кстати, если вы добавите к нашему контейнеру промежутки - "gap: 15px;", Toolbox также их отобразит особым образом:

Итого

Мы познакомились с еще одним инструментом разработчика - Mozilla Toolbox (хотя их тоже можно называть Dev Tools, не принципиально). В нем шикарно реализована поддержка работы с CSS Grid для более тонкого понимания работы с ним. В дальнейших статьях я буду прибегать к помощи именно этого инструмента, поэтому, рекомендую вам с ним поближе познакомиться, поиграться с настройками, изучить работу уже рассмотренных свойств grid контейнера. В следующей статье мы закончим разбор свойств контейнера и затем приступим к изучению свойств его элементов.