Краткое введение в CSS Grid

Краткое введение в CSS Grid

Coding


CSS Grid - это небесный ответ всем этим надоедливым разработчикам, которые годами создавали сетки на веб-страницах.

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

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


Grid Containers

Первым шагом к настройке вашей сетки является определение контейнера вашей сетки.Контейнер задает контекст форматирования сетки и управляет разметкой, выравниванием и выравниванием его прямых дочерних элементов.


Grid Items

Элементы сетки являются прямыми потомками контейнера сетки.Любой элемент внутри контейнера сетки считается элементом сетки.


Building Out a Grid

Мы собираемся начать с создания и настройки нашего контейнера сетки. В нашем HTML-документе давайте создадим элемент div с шестью элементами абзаца внутри и присвоим ему имя класса my_grid . Теперь в нашем CSS мы можем установить класс 'my_grid' в качестве контейнера сетки, используя свойство display .


Columns and Rows

Давайте определим некоторые столбцы и строки - для этого мы можем использовать следующие свойства CSS: grid-template-columns и grid-template-row . Я собираюсь определить два столбца и три строки и установить их ширину и высоту равными 1fr, так что для тех, кто может не знать, новая единица fr представляет дробную единицу. Устанавливая grid-template-columns в 1fr 1fr, я создаю два столбца в моей сетке и говорю им обоим занять одну дробную единицу доступного пространства.

Вот результаты нашей сетки

Мы можем легко изменить нашу сетку, просто отрегулировав ширину строк / столбцов или добавив их больше.


Gutters

Guttersэто пробелы или промежутки между строками и столбцами вашей сетки. Чтобы определить gutters, мы можем использовать grid-column-gap-gap и grid-row-gap-gap .

В качестве альтернативы, вы могли бы использовать grid-gapсамостоятельно. С помощью grid-gap вы можете задать ему два значения: первое - это значение разрыва строк, а второе - столбцы.

Продолжайте идти

Легко, нет? Если вам понравилось чтение этого краткого введения в CSS-сетки, я настоятельно рекомендую вам продолжить изучение этого вопроса.

У CSS Tricks есть удивительное руководство, которое вы можете изучить, чтобы освоить сетку. Джен Симмонс также опубликовала сообщение для некоторых замечательных ресурсов для изучения CSS Grid. 




Заметил ошибку или есть вопросы?Рассказывай нам о них,связаться с нами ты сможешь с помощью нашего чата или же с помощью бота обратной связь


Не забывайте ставить 👍 если вам понравилась и подписаться на канал,а так же посетить наш чат.


Создано с помощью Tgraph.io