В течение последних двух месяцев я более глубоко изучал CSS Grid. В этом уроке я хочу поделиться основными выводами. Чтобы упростить задачу, я объяснил их с помощью наглядных диаграмм.
Вот список моих лучших руководств по веб-разработке.
Полное руководство по CSS-гибкости на Hashnode.
Ultimate CSS grid tutorial на Hashnode.
Функции высшего порядка .map, .filter и .reduce на Hashnode.
Вы можете подписаться на меня в Twitter, чтобы получать обучающие материалы, советы по JavaScript и т. Д.
Чтобы получить хорошее представление о том, как работает гибкий график, попробуйте редактор гибких макетов на этой странице.
Вы, вероятно, уже знакомы с блочной моделью CSS для обычных элементов. Начнем с аналогичного представления «с высоты птичьего полета» для таблицы CSS:
В этом случае есть 3 ‹div› элемента. Третий растянут на 2 клетки.
Обратите внимание, что линии можно считать в обратном направлении, используя отрицательную систему координат.
Сетка выше имеет размер 5 на 4 ячеек. Это определяется следующим образом:
div#grid { /* This is our CSS grid parent container */
display: grid;
grid-template-columns: 100px 100px 100px 100px 100px; /* 5 cols */
grid-template-rows: 100px 100px 100px 100px; /* 4 rows */
}
Количество строк и столбцов предполагается неявно числом установленных значений.
Между каждой ячейкой есть линия и необязательный пробел .
Строки и столбцы между строками упоминаются в качестве дорожек сетки.
Всегда есть [ячейка + 1] строки по измерению.
Следовательно, 5 столбцов будут иметь 6 строк, тогда как 4 строки будут иметь 5 строк .
В следующем примере есть 7 столбцов и только 1 строка:
Первое важное, что вы заметите в CSS-сетке, это то, что внешние линии не зависят от размера зазора. Только внутренние линии. Мы углубимся в это чуть позже в этом руководстве, когда рассмотрим дробные (fr) единицы.
Сетка CSS двунаправленная. Его элементы могут располагаться горизонтально (столбец) или вертикально (строка ). Установите значение с помощью свойства grid-auto-flow.
Он работает как Flex:
Подумайте о сетке абстрактно:
Итак, мы получили общее представление о том, как это работает.
Креативная часть возникает, когда вы сталкиваетесь с проблемой фактического подбора мест размещения элементов для создания разумного макета приложения. CSS Grid предлагает несколько свойств для этого. Мы рассмотрим их в следующем разделе этого руководства через мгновение.
Давайте закрепим наши знания, рассмотрев эти примеры:
Я использовал только два элемента ‹div› для предметов. Следовательно, сетка выше.
Неявное и явное размещение контента
Но что произойдет, если мы добавим еще один элемент в список?
Добавление элемента 3 в тот же макет автоматически расширяет его (синий элемент).
Этот новый интервал создается автоматически путем копирования значений из первой строки.
Давайте добавим пункт 4, не так ли?
И снова наша сетка CSS приняла решение растянуть элемент 4 на оставшееся пространство во второй строке. Это связано с тем, что в grid-template-rows указано достаточно места только для 1 строки. Остальные автоматические.
Размещение синих элементов не явно указано вами. Это неявное (автоматическое) размещение. Они как бы просто попадают в это пространство.
Размещение откровенного содержания
Это именно то, что вы ожидаете от ячеек сетки, если вы установите собственные значения для всех элементов в списке:
В основном вы можете получить контроль над пространством во всех последовательных строках, добавив дополнительные значения в свойство grid-template-rows. Обратите внимание, что элементы здесь больше не неявно. Вы их точно определили. (25 пикселей 75 пикселей)
Автоматический интервал
Сетка CSS предлагает несколько свойств для автоматического растягивания ее ячеек на переменное / неизвестное количество пространства. Вот ключевые примеры для автоматического потока как столбцов, так и строк:
В нижнем примере демонстрируется использование ключевого слова auto. Это просто означает, что ячейка будет растягиваться, чтобы заполнить столько места, сколько осталось в родительском контейнере после того, как она уже была заполнена явно размещенными элементами.
CSS Grid Gaps (пробелы в сетке)
Говоря о сетке CSS, нельзя не говорить о пробелах. Промежутки - это горизонтальные и вертикальные промежутки между ячейками сетки.
Разрывы управляются с помощью свойств grid-column-gap и grid-row-gap:
Вы можете использовать разные зазоры в обоих измерениях. возможно, это может быть полезно для создания галерей видео или изображений:
Разрывы между размерами (столбцы и строки) могут различаться по размеру. Но размер зазора указывается один раз для всех зазоров в сетке в данном измерении. Как видите, промежутки разного размера в пределах одного измерения недопустимы:
Я действительно хотел бы, чтобы были возможны зазоры разного размера. Я понимаю, чем это может быть полезно. Некоторые предлагают использовать пустые дорожки для достижения аналогичного эффекта.
Единицы FR (Дробные единицы)
Дробные (fr) единицы являются уникальными для сетки CSS.
Дробная единица выделяется относительно всех других элементов в родительском элементе:
Поведение меняется, но 1fr остается неизменным независимо от того, используются ли разные значения. Дробные единицы работают аналогично значениям%, но их проще и интуитивно понятно разделить с помощью:
В этом примере для простоты показано только поведение столбца. Но то же самое работает и со строками. Просто используйте свойство grid-template-rows.
Дробные единицы и их связь с зазорами
Пространство, определенное с помощью дробных единиц, изменяется на основе пробелов. Тот же 1fr внутри того же родителя будет уменьшаться до меньшего размера при добавлении пробелов:
Как видите, это дает вам довольно хороший набор свойств для размещения содержимого практически любым желаемым образом, не беспокоясь о значениях пикселей.
Эта новая динамика превращает дизайн в пиксель в прошлое. Теперь подумаем о дизайне макета, используя интуитивно понятный подход!
Наконец, чтобы дать вам лучшее представление об использовании нецелых дробных единиц, вот забавная сетка, которую я создал. Вы также можете указать их, используя числа с плавающей запятой:
Размещение контента
Мы только что рассмотрели анатомию CSS-сетки. Надеюсь, вы лучше понимаете, как структурирует содержимое CSS-сетки. Но теперь нам нужно проявить творческий подход и действительно разместить в нем какие-то предметы. То, как это сделано, может изменить поведение сетки CSS по умолчанию. В этом разделе мы узнаем, как это происходит.
Чтобы разместить элементы в ячейках или областях шаблона в сетке, вы будете ссылаться на них с помощью линии между ячейками. Не ‹table› - как интервалы.
Сетка CSS позволяет использовать промежутки для определения ширины и высоты области содержимого (в пространстве ячеек), как таблицы. Мы немного рассмотрим это. Но вы все равно можете и, вероятно, должны указать начальную ячейку, используя номера строк или именованные строки (другие об этом чуть позже.) Это зависит от ваших предпочтений ..
Что касается размещения содержимого в нескольких ячейках, наиболее очевидным и заманчивым является охват ячеек.
Распределение содержимого ячеек
Вы можете распределить элемент по нескольким ячейкам.
Важно: привязка изменяет расположение окружающих элементов.
Распределение с использованием столбца сетки и строки сетки
Используя свойства grid-column и grid-row в самом элементе элемента:
Синие элементы изменили местоположение после того, как Элемент 7 охватил несколько ячеек. И оранжевые элементы были сдвинуты на ряд вниз.
Есть и другой способ сделать то же самое ...
Распределение с использованием начала столбца сетки…
… конец-столбца-сетки, начало-строки-сетки и конец-строки-сетки, вы можете указать фактические начальную и конечную точки, через которые вы хотите охватить содержимое ячейки.
Я удалил элементы старше 15 (оранжевые), потому что они нам больше не нужны:
Растягивание содержимого по строкам столбца и строки работает в обоих направлениях.
мин-содержание и макс-содержание
Значения min-content и max-content передаются в grid-template-columns или grid-template-rows , как и любое другое значение, связанное с размером (например, px, 1fr и т. д.)
Давайте взглянем на этот образец. Это наша отправная точка. Мы немного изменим ситуацию, чтобы увидеть, как значения min / max влияют на ячейки.
Давайте посмотрим, какой тип результатов будет получен, если мы переключим один из столбцов на min-content и max-content :
Для текста из одного слова нет никакой разницы между наблюдаемыми результатами, используем ли мы min-content или max-content. Это потому, что привет - это одно слово. Его значения min и max абсолютно одинаковы.
Но с более сложным текстом все становится интереснее. В следующем примере демонстрируется основная идея, лежащая в основе min-content и max-content:
Здесь min-content использовал самое длинное слово в предложении (stranger) как базовую ширину.
При использовании max-content вся текстовая строка с пробелами заполняет пространство.
Но что произойдет, если мы применим min-content или max-content ко всем ячеек?
Я заметил, что по умолчанию текст центрировался всякий раз, когда я использовал min-content, хотя text-align: center не было установлено по пункту.
Изображения и макс-контент
Я поместил изображение этой голубой розы в ячейку.
И, как и ожидалось, сетка расширилась, чтобы выделить достаточно места:
Когда я явно установил ширину изображения на 50% просто для того, чтобы увидеть, что происходит, CSS Grid все еще сохранил ширины ячейки до 100% изображения, но отображаемое изображение с шириной 50% ( как ожидалось) и автоматически центрировали его по горизонтали внутри ячейки.
По умолчанию текст и изображения (или любое содержимое) будут автоматически центрированы в ячейках CSS Grid.
Позиционирование контента
До этого момента мы говорили о структуре Grid в целом.
В следующем разделе мы рассмотрим, как добиться «разнонаправленного» перемещения внутри ячеек. Конечно, мы не будем использовать здесь свойство float.
Разнонаправленный поплавок на 360 °
Я не думаю, что спецификация CSS Grid называет это так. Но на самом деле можно создать именно это… плавающее поведение на 360 градусов.
Это работает как с встроенными, так и с блокирующими элементами! И я думаю, что это моя любимая функция из всего набора возможностей CSS Grid.
Все 9 комбинаций возможны с использованием свойств align-self и justify-self.
Они объясняются ниже.
Выровнять себя (выровнять себя)
Это свойство помогает размещать контент вертикально.
Используйте align-self: start, чтобы выровнять содержимое по верхнему краю ячейки.
Используйте align-self: center, чтобы выровнять контент по вертикальной середине.
Используйте align-self: end, чтобы выровнять содержимое по нижней части ячейки.
Оправдать себя (оправдать себя)
Это свойство помогает размещать контент горизонтально.
Используйте justify-self: start, чтобы выровнять содержимое по левому краю ячейки.
Используйте justify-self: center, чтобы выровнять контент по центру по горизонтали.
Используйте justify-self: end, чтобы выровнять содержимое по правому краю ячейки.
Вы можете использовать любую из комбинаций 9 justify-self x align-self для выравнивания чего-либо в любом месте, например multi-directional float.
Области шаблона
Области шаблона определяются с помощью свойства grid-template-sizes.
Обратите внимание: области шаблона для каждой строки заключены в двойные кавычки.
Каждый столбец разделен пробелом.
В этом примере я просто объяснил, как называть ары. Чтобы воспользоваться преимуществами областей шаблона, вам необходимо категоризировать прямоугольные блоки ячеек по тем же именам.
Блоки тетриса запрещены. Можно использовать только прямоугольники:
Здесь слева - это одна область, охватывающая 3 ячейки вниз. CSS Grid автоматически рассматривает его как единый блок. То же самое и с Правильно. В этом простом примере я создал две колонки. Но ты получил идею. Выделите более крупные области, назвав их.
Чтобы разместить элемент в этой области, просто добавьте grid-area: TemplateName. В данном случае это область сетки: слева или область сетки: справа.
В именах областей шаблона нельзя использовать пробелы. Здесь я использовал тире.
Практический пример областей шаблона сетки CSS
Теперь мы понимаем, как блокировать прямоугольные области. Давайте посмотрим на потенциально реальный сценарий. Здесь я продемонстрирую очень простой макет.
Я заблокировал очень простой макет веб-сайта двумя боковыми панелями, заголовком и нижний колонтитул. Основная область находится в центре и занимает пространство ячеек 3 x 2:
Здесь нам нужно всего 5 предметов. Добавьте еще, и они будут вытеснены за пределы основной области сетки в неявные ячейки.
Просто убедитесь, что ваши области всегда квадратные или прямоугольные.
Именование строк
Вместо того, чтобы всегда ссылаться на строки по их номеру, вы также можете дать им имена. Таким образом, их будет легко запомнить для растягивания элементов по нескольким ячейкам. Числа могут быть утомительными!
Ниже показано, как это выглядит:
Используйте квадратные скобки для обозначения ваших строк. Затем используйте эти имена при указании длины, которую должны занимать ваши элементы, с помощью / косой черты.
В заключение
CSS Grid - обширная тема. Следовательно, это не полное руководство по CSS Grid о том, как создавать настоящие макеты CSS. Я просто использовал один пример для каждой отдельной части в качестве отправной точки для кого-то, кто не знаком с сеткой.
Надеюсь, информация здесь была проницательной и вызвала интерес к созданию веб-сайтов с использованием CSS Grid.
CSS Grid - это не просто HTML-элемент. Это целая система для создания адаптивных веб-сайтов и веб-приложений.
Его свойства и values описывают конгломерат методов, извлеченных из более чем десятилетнего опыта создания веб-сайтов с использованием общих тегов HTML.
Ограниченное по времени предложение
На диаграммы в этом руководстве непосредственно повлияла рукопись!
