Основы CSS Grid
Хола!! Если вы впервые посетитель Добро пожаловать! 🤩 Прежде всего, начнем с небольшой цитаты.👇
Вы никогда не должны рассматривать свои проблемы как недостаток. Вместо этого вам важно понять, что ваш опыт преодоления невзгод и трудностей на самом деле является одним из ваших самых больших преимуществ. ~ Мишель Обама~
Вы можете спросить, почему я начинаю статью с этой цитаты. Позвольте мне рассказать вам, почему. Что касается меня, сетка — довольно сложная вещь для изучения. Но как только вы узнаете его по крупицам, вы в конечном итоге полюбите его. Если вы такой же человек, как я 👊 подумал, что вам будет полезно начать эту статью с небольшой мотивации.
Ладно-ладно, мы много поговорили, есть много удивительных вещей, через которые нам предстоит пройти. Тогда начнем самое интересное?💪
У некоторых из вас могут быть глубокие знания о сетках, некоторые из вас, возможно, не слышали о сетках в CSS, а некоторым из вас необходимо углубить свои знания о сетках. Не волнуйтесь, это статья для всех, кто изучает ее впервые, и для тех, кто уже знает, но пришел сюда, чтобы прочитать статью, чтобы отточить свои знания.
Таким образом, цель этой статьи — охватить все обязательные свойства сетки CSS, которые мы часто используем. Для этого контент был разделен на четыре основные категории.
Сначала мы проведем вас через введение в сетку. Затем мы переходим к контейнеру сетки. С этими знаниями мы переходим к элементам сетки и, что не менее важно, мы закончим эту статью специальными единицами и функциями, которые мы используем в сетках.
01) Введение в сетку 🔥
🔴1.1) Что такое грид?
Начнем с небольшого определения сетки. Сетка может быть определена как набор пересекающихся вертикальных и горизонтальных линий. CSS Grid Layout — это двухмерная система компоновки на основе сетки, которая разделяет страницу на основные разделы.
Наличие строк и столбцов в системе компоновки на основе сетки упростило бы разработку веб-страниц. Поэтому мы можем стилизовать без позиционирования, плавающих элементов, таблиц и встроенных блоков.
Поэтому, когда мы копаем глубже, мы можем объявить контейнер сетки для элемента, используя display: grid. Более того,мы можем определить столбцы и строки в сетке, используя свойства grid-template-rows и grid-template-columns. . И последнее, но не менее важное: мы можем получить пространство между свойствами, используя grid-gap.
Только здесь мы рассмотрели краткое введение в сетку. В дальнейшем мы углубимся в каждый раздел.
🔴1.2) Почему и когда мы используем Grid?
Почему мы используем сетку: -
Сетка CSS удобна, когда нам удается разделить страницу на основные области или определить взаимосвязь с точки зрения размера, положения и слоя между частями элемента управления, созданного из примитивов HTML.
Когда мы должны использовать сетку: -
🔸 Если вам нужно реализовать сложный дизайн:-
Двумерная система макета здесь идеально подходит для создания сложного дизайна, мы можем использовать ее в свою пользу для создания более сложных и удобных в сопровождении веб-страниц.
🔸 Когда вам нужен зазор между элементами блока:-
Не используя свойства полей, мы можем очень легко определить зазор между нашими строками или столбцами в свойстве grid-gap.
🔸 Когда вам нужно перекрывать элементы:-
Вам просто нужно использовать свойства grid-column и grid-row, и вы можете очень легко получить перекрывающиеся элементы.
🔸 Когда вам нужна предварительная настройка макета
Представьте, что у нас есть структуры макета, используя строки и столбцы вместе, мы можем расположить элементы так, как мы хотим.
🔴1.3) В чем разница между Flexbox и Grid Property?
01) Макет
🔸 Сетка:- CSS Grid Layout — это двухмерная система компоновки на основе сетки со строками и столбцами.
🔸 FlexBox:- CSS Flexbox — это система одномерной компоновки.
Прежде чем перейти к следующему пункту, давайте кратко объясним, что такое двухмерные и одномерные макеты? 👇
Двухмерный макет. Если вы можете взять компоненты макета и нарисовать над ними сетку, дополненную строками и столбцами, то что у вас есть двухмерный макет.
Одномерный макет. Одномерный макет — это макет, в котором элементы размещаются в отдельных строках и столбцах без учета следующей строки или столбца.
Примечание. Это просто означает, что Flexbox может работать либо со строками, либо со столбцами одновременно, а Grid — с обоими.
02) Перекрытие
🔸 Сетка:- Сетка легко допускает наложение элементов. Таким образом, у нас есть свобода размещать элементы поперек линий сетки или даже в одной ячейке сетки.
🔸 FlexBox:- Перекрытие гибких элементов может быть достигнуто, но не без недостатков. Чтобы перекрывать гибкие элементы, нужно было бы использовать отрицательные поля или абсолютное позиционирование. Что неизменно удаляет элементы из гибкого макета.
03) Размерность и гибкость
🔸 Сетка:- Сетка позволяет изменять ширину как единицу длины. Это уравновешивает ограничения Flex.
🔸 FlexBox:- Flexbox предлагает больший контроль над выравниванием и распределением пространства между элементами.
04) Выравнивание
🔸 Сетка: CSS Grid использует дробные единицы измерения для гибкости сетки и функцию автоматического подбора ключевых слов для автоматической настройки столбцов или строк.
🔸 FlexBox:- Flex Direction позволяет разработчикам выравнивать элементы по вертикали или горизонтали, что используется, когда разработчики создают и переворачивают строки или столбцы.
05) Управление предметами
🔸 Сетка:- Сетка поддерживает как неявное, так и явное размещение контента. Его встроенная автоматизация позволяет ему автоматически расширять позиции и копировать значения в новое создание из предыдущего элемента.
🔸 FlexBox:- Flex Container является родительским элементом, а Flex Item представляет дочерние элементы. Контейнер Flex может обеспечить сбалансированное представление, регулируя размеры элемента. Это позволяет разработчикам проектировать для изменяющихся размеров экрана.
🔴1.4) Поддержка браузера
ТЕПЕРЬ ДАВАЙТЕ ПЕРЕЙДЕМ К ОСНОВНОМУ СОДЕРЖАНИЮ ЭТОЙ СТАТЬИ🚀
02) Контейнер сетки 🔥
🟡2.1) Показать свойство?
Свойство Display устанавливает внутренний и внешний типы отображения элемента. Следовательно, используя свойство display, мы можем определить элементы как контейнер сетки.
Для этого мы можем использовать следующие значения
🔹 display: grid:-Элемент ведет себя как блочный элемент и размещает свое содержимое в соответствии с моделью сетки.
🔹 display: inline-grid:-Элемент ведет себя как встроенный элемент и размещает свое содержимое в соответствии с моделью сетки.
🟡2.1) Свойство шаблона?
CSS-свойство grid-template является сокращением для определения столбцов сетки (grid-template-columns), строк сетки (grid-template-rows) и областей (grid-template-areas).
🔹 сетка-шаблон-столбцы:-
- Свойство grid-template-column определяет количество столбцов в макете сетки и может определять ширину каждого столбца.
- Значение представляет собой список, разделенный пробелами, где каждое значение определяет ширину соответствующего столбца.
<!-- Eg:- Imagine you need to have a grid layout which contained same size 4 columns.-->
.grid-container
{
display: grid;
grid-template-columns: auto auto auto auto;
}
<!-- Eg:- Imagine you need to have a grid layout which contained 4 columns with specified width size.-->
.grid-container
{
display: grid;
grid-template-columns: 80px 200px auto 300px;
}
🔹 строки-шаблона сетки:-
- Свойство grid-template-column определяет высоту каждой строки.
<!-- Eg:- Imagine you need to have a two rows with 4 columns which has different heights but same width.-->
.grid-container
{
display: grid;
grid-template-columns: auto auto auto auto;
grid-template-rows: 50px 100px;
}
🟡2.2) Недвижимость Gap?
Свойство gap используется для установки промежутков между строками и столбцами.
🔹 разрыв между строками:-
- Свойство зазора строки сетки определяет размер промежутка между строками в макете сетки.
<!-- Eg:- Imagine you need to have a grid layout which contained same size 4 columns and the gap size between should be 50px for both row.-->
.grid-container
{
display: grid;
grid-template-columns: auto auto auto auto;
grid-row-gap: 50px;
}
🔹 разрыв-столбца-сетки:-
- Свойство зазора строки сетки определяет размер зазора между столбцами в макете сетки.
<!-- Eg:- Imagine you need to have a grid layout which contained same size 4 columns and the gap size between should be 50px for both column.-->
.grid-container
{
display: grid;
grid-template-columns: auto auto auto auto;
grid-column-gap: 50px;
}
🔹 разрыв сетки:-
- Свойство grid-gap используется для установки промежутков между строками и столбцами. Это сокращение для разрыва строки и разрыва столбца.
- Когда вы говорите зазор сетки, это означает, что без указания строки или столбца мы указали зазор для строки и столбца в обоих случаях.
<!-- Eg:- Imagine you need to have a grid layout which contained same size 4 columns and the gap size between should be 50px for both row and column.-->
.grid-container
{
display: grid;
grid-template-columns: auto auto auto auto;
grid-gap: 50px;
}
<!-- Eg:- Imagine you need to have a grid layout which contained same size 4 columns with 2 rows aand the gap size between should be 50px for column and 100px for column.-->
.grid-container
{
display: grid;
grid-template-columns: auto auto auto auto;
grid-gap: 50px 100px;
grid-template-rows: 310px 100px
}
🟡2.3) Свойство Align-items и Justify-Content?
Поскольку мы говорили об этих свойствах в Статье о Flexbox, я не буду объяснять их вам снова. Если вы еще не ознакомились со статьей о Flexbox, не стесняйтесь заглянуть.😉
Надеюсь, вы ознакомились со статьей о flexbox и теперь знакомы со свойствами align-items и justify-content. Прежде чем двигаться дальше, позвольте мне дать вам небольшую заметку.
- Между флексбоксом и сеткой есть небольшая разница, о которой я хочу вам рассказать. Мы используем flex-end и flex-start во flexbox, но в сетке мы используем end и start.
- Имейте в виду, что различаются только имена. Принцип работы такой же, как и во flexbox.
03) Элементы/элементы сетки🔥
🟠 3.1) Свойство столбца сетки
Свойство Grid Column указывает размер и расположение элемента сетки в макете сетки.
🔹 начало столбца сетки:-
- Свойство grid-column-start определяет, в какой строке столбца будет начинаться элемент.
<!-- Eg:- Imagine you need to have a grid layout which contained same size 4 columns and the gap size between should be 50px for both row and column.-->
<!-- And this time the container start from second column-->
.item-b
{
display: grid;
grid-template-columns: auto auto auto auto;
grid-gap: 50px;
grid-column-start: 2;
}
Примечание. Столбец 01, столбец 02 и т. д. определены для каждого столбца, а не для имени элемента
🔹 сетка-столбец-конец:-
- Свойство grid-column-end определяет, сколько столбцов будет охватывать элемент или на какой строке столбца элемент будет заканчиваться.
<!-- Eg:- Imagine you need to have a grid layout which contained same size 4 columns and the gap size between should be 50px for both row and column.-->
<!-- And this time the container will span/stretch to second column-->
.item-b
{
display: grid;
grid-template-columns: auto auto auto auto;
grid-gap: 50px;
grid-column-end: 2;
}
Примечание. Столбец 01, столбец 02 и т. д. определены для каждого столбца, а не для имени элемента
🔹 сетка-столбец: -
- Свойство grid-column указывает размер и расположение элемента сетки в макете сетки.
- Это сокращенное свойство для grid-column-start и grid-column-end.
<!-- Eg:- Imagine you need to have a grid layout which contained same size 4 columns and the gap size between should be 50px for both row and column.-->
<!-- And this time the container start from second column and stretch to two columns-->
.item-b
{
display: grid;
grid-template-columns: auto auto auto auto;
grid-gap: 50px;
grid-column: 2/span 2;
}
Примечание. Столбец 01, столбец 02 и т. д. определены для каждого столбца, а не для имени элемента
🟠 3.2) Свойство строки сетки
🔹 сетка-строка-начало:-
- Свойство grid-row-start определяет, с какой строки строки будет начинаться элемент.
<!-- Eg:- Imagine you need to have a grid layout which contained same size 4 columns and the gap size between should be 50px for both row and column.-->
<!-- And this time the container start from second row-->
.item01
{
display: grid;
grid-template-columns: auto auto auto auto;
grid-gap: 50px;
grid-row-start: 2;
}
🔹 сетка-ряд-конец:-
- Свойство grid-row-start определяет, сколько строк будет охватывать элемент или на какой строке строки элемент будет заканчиваться.
<!-- Eg:- Imagine you need to have a grid layout which contained same size 4 columns and the gap size between should be 50px for both row and column.-->
<!-- And this time the container needs to stretch till second row-->
.item01
{
display: grid;
grid-template-columns: auto auto auto auto;
grid-gap: 50px;
grid-row-end: span 2;
}
🔹 сетка-строка:-
- Свойство grid-row-start указывает размер и расположение элемента сетки в макете сетки.
- Это сокращенное свойство grid-row-start и grid-row-end.
<!-- Eg:- Imagine you need to have a grid layout which contained same size 4 columns and the gap size between should be 50px for both row and column.-->
<!-- And this time the container start from first row and stretch to two rows-->
.item-b
{
display: grid;
grid-template-columns: auto auto auto auto;
grid-gap: 50px;
grid-row: 1/span 2;
}
🟠 3.3) Свойство области сетки
Свойство grid-area указывает размер и расположение элемента сетки в макете сетки, и это сокращенное свойство для упомянутых выше grid-column-start, grid-column-end, grid-row-start и grid-row-end.
<!-- Eg:- Imagine you need to have a grid layout which contained same size 4 columns and 3 rows, and the gap size between should be 50px for both row and column.-->
<!-- And this time the container start from 2nd row and 1st column and span 2 rows and 3 columns-->
.item-b
{
display: grid;
grid-template-columns: auto auto auto auto;
grid-gap: 50px;
grid-area: 2 / 1 / span 2 / span 3;
}
🟠3.5) Выравнивание элемента
🔹 выровнять -self
- align-self используется для выравнивания элемента сетки внутри ячейки вдоль столбца.
- Свойство align-self переопределяет свойство контейнера align-items.
Введите 01:- start
<!-- Aligns the grid item to be positioned with the start edge of the cell-->
.item-start
{
display: grid;
align-self: start
}
Введите 02:- конец
<!-- Aligns the grid item to be positioned with the end edge of the cell-->
.item-end
{
display: grid;
align-self: end
}
Тип 03:- по центру
<!-- Aligns the grid item to be positioned in the center of the cell-->
.item-center
{
display: grid;
align-self: center
}
Тип 04:- растянуть
<!-- Aligns the grid item is positioned to fit the container or fills the whole height of the cell-->
.item-stretch
{
display: grid;
align-self: stretch
}
🔹оправдать себя
- justify-self используется для выравнивания элемента сетки внутри ячейки вдоль строки.
- Свойство justify-self переопределяет свойство контейнера justify-items.
Введите 01:- start
<!-- Aligns the grid item to be positioned with the start edge of the cell-->
.item-start
{
display: grid;
justify-self: start
}
Введите 02:- конец
<!-- Aligns the grid item to be positioned with the end edge of the cell-->
.item-end
{
display: grid;
justify-self: end
}
Тип 03:- по центру
<!-- Aligns the grid item to be positioned with the center of the cell-->
.item-center
{
display: grid;
justify-self: center
Тип 04:- растянуть
<!-- Aligns the grid item is positioned to fit the container or fills the whole height of the cell-->
.item-stretch
{
display: grid;
justify-self: stretch
04) Часто используемые специальные блоки и функции🔥
🔵 4.1) fr единиц
- Fr – это дробная единица.
- Единица Fr — это ввод, который автоматически вычисляет деления макета при корректировке пробелов внутри сетки.
<!-- Let us take our very first example and see how we can get the same output using fr unit.-->
.grid-container
{
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
}
<!-- Very First Example ( grid-template-columns: auto auto auto auto;) -->
<!-- Same output different method-->
🔵 4.2) функция повтора ( )
- Repeat() — это нотация, которую можно использовать со свойствами grid-template-columns и grid-template-rows, чтобы сделать ваши правила более краткими и понятными при создании большого количества столбцов или строк.
- И это также экономит время.😉
<!-- Let us take the above example and wrie it using repeat() function.-->
.grid-container
{
display: grid;
grid-template-columns: repeat(4, 1fr);
}
Я всегда упоминаю, что изучать основы — это весело, но еще круче применять их в реальных приложениях. Надеюсь, теперь вы готовы применить их для создания реальных приложений. Позвольте мне закончить эту статью заключительной мыслью на этой передаче знаний.
Заключительная мысль
Так как сетка — это огромная тема, в которой есть чему поучиться. Здесь я в основном сосредоточился на основах сетки, которая начинается с введения и знакомит вас со свойствами сетки, что даст вам возможность применить их для создания реальных приложений.
Если вам это нравится, похлопайте один или несколько раз и не стесняйтесь оставлять свои мысли и отзывы в разделе комментариев.
Спасибо, что ознакомились с этим. Не стесняйтесь ознакомиться с другими моими статьями, нажав на следующую ссылку 👇
🔸Подпишитесь на меня в Твиттере👀: @NathashaR97🔸
🔴Будьте готовы выполнить несколько упражнений с использованием сеток в следующих статьях.🔴
И, наконец, если вы хотите узнать больше о HTML и CSS, не стесняйтесь также ознакомиться со следующими статьями👇:-
Проверьте следующее для одного из обучающих сеансов, который проведет вас через каждый компонент в сетке с упражнениями.
