Привет! Сегодня мы поговорим о CSS Grid и его основах. Grid — это мощный инструмент для создания сеток и макетов на веб-страницах. Вот несколько ключевых моментов, которые помогут тебе понять основы и преимущества CSS Grid:
- Grid позволяет создавать гибкие сетки с помощью горизонтальных и вертикальных линий. Мы можем определить количество столбцов и строк, а также их размеры.
- Расположение элементов: С помощью CSS Grid мы можем точно определить расположение элементов внутри сетки. Мы можем указывать, в какой ячейке должен находиться элемент или какие столбцы и строки он должен занимать.
- Гибкость: CSS Grid предлагает нам гибкость в управлении сеткой. Мы можем изменять размеры и порядок элементов в разных точках разрешения экрана, делая наши макеты адаптивными.
- Выравнивание: CSS Grid также позволяет нам легко выравнивать элементы внутри сетки, как по горизонтали, так и по вертикали.
Определение контейнера сетки
Свойство display: grid применяется к родительскому элементу, который будет служить контейнером для нашей сетки. После применения этого свойства, контейнер превращается в сетку, которую мы можем настраивать и размещать на ней элементы.
Например, чтобы создать контейнер сетки, мы можем применить следующее правило CSS:
.container {
display: grid;
}
Это простое правило позволяет определить контейнер сетки. После этого мы можем использовать другие свойства, такие как grid-template-rows, grid-template-columns и grid-gap, чтобы настроить размеры и распределение строк и столбцов в сетке.
Размещение элементов внутри контейнера сетки с помощью grid-template-rows и grid-template-columns
Свойство grid-template-rows позволяет определить размеры и распределение строк в нашей сетке. Мы можем использовать единицы измерения, такие как пиксели, проценты или автоматическое масштабирование, чтобы указать размеры строк.
Например, если мы хотим создать сетку с тремя строками, где первая строка имеет высоту 10 процентов, вторая строка занимает 75 пикселей доступного пространства, а третья строка занимает 50 процентов, мы можем использовать следующее правило CSS:
.grid-container {
display: grid;
grid-template-rows: 10% 75px 50%;
}
Аналогично, свойство grid-template-columns позволяет задать размеры и распределение столбцов в сетке. Мы можем использовать единицы измерения или ключевые слова, чтобы определить размеры столбцов.
Например, если мы хотим создать сетку с двумя столбцами, где первый столбец занимает 50 пикселей, второй столбец масштабируется автоматически, а третий равен 75 пикселям, мы можем использовать следующее правило CSS:
.grid-container {
display: grid;
grid-template-columns: 50px auto 75px;
}
Таким образом, с помощью свойств grid-template-rows и grid-template-columns мы можем точно определить размеры и распределение строк и столбцов внутри контейнера сетки.
Функция repeat и новые единицы измерения
Функция repeat позволяет нам повторить одно и то же значение несколько раз внутри свойства grid-template-rows или grid-template-columns. Это очень удобно, когда у нас есть несколько одинаковых строк или столбцов.
Например, если мы хотим создать сетку с тремя строками, где каждая строка имеет высоту 100 пикселей, мы можем использовать функцию repeat следующим образом:
.grid-container {
display: grid;
grid-template-rows: repeat(3, 100px);
}
Единицы измерения fr (fraction) позволяют нам распределить доступное пространство в сетке между строками или столбцами пропорционально их значениям. Например, если у нас есть два столбца, где первый занимает 1fr, а второй занимает 2fr, второй столбец будет занимать в два раза больше места, чем первый столбец.
Вот пример использования единицы измерения fr:
.grid-container {
display: grid;
grid-template-columns: 1fr 2fr;
}
Распределение пространства внутри сетки с помощью grid-gap
Свойство grid-gap позволяет задать промежуток между элементами внутри сетки. Это позволяет создать отступы или разрывы между элементами и делает сетку более читабельной и привлекательной.
Мы можем использовать два значения в свойстве grid-gap: первое значение определяет размер промежутка по горизонтали, а второе значение - по вертикали. Например:
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 20px 10px;
}
В этом примере мы создали сетку с двумя столбцами, каждый из которых занимает равную долю доступного пространства. Между столбцами установлен промежуток 20 пикселей по горизонтали и 10 пикселей по вертикали.
Мы также можем использовать одно значение в свойстве grid-gap, чтобы задать одинаковый промежуток и по горизонтали, и по вертикали. Например:
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 20px;
}
В этом случае промежуток между столбцами и строками будет одинаковым и составит 20 пикселей.
Есть ещё 2 аналога свойства grid-gap специально для столбцов и строк:
Свойство grid-column-gap устанавливает промежуток между столбцами в сетке.
Свойство grid-row-gap устанавливает промежуток между строками в сетке.
Используя свойство grid-gap, мы можем легко настраивать пространство между элементами внутри сетки, делая наш макет более эстетичным и удобочитаемым.
Управление размерами элементов с помощью grid-row и grid-column
Свойство grid-row позволяет указывать, на каких строках должен располагаться элемент в сетке. Мы можем использовать числовые значения или ключевые слова, такие как "span" и "auto". Например:
.item {
grid-row: 2 / 4; /* Элемент займет пространство с 2-й по 4-ю строку */
}
.item {
grid-row: span 3; /* Элемент будет расположен на нескольких строках, занимая 3 строки */
}
.item {
grid-row: auto;
/* Элемент будет автоматически размещен на доступных строках */
}
Аналогично, свойство grid-column позволяет указывать, на каких столбцах должен располагаться элемент в сетке. Мы также можем использовать числовые значения, ключевые слова и даже фракции. Например:
.item {
grid-column: 1 / 3;
/* Элемент займет пространство с 1-го по 3-й столбец */
}
.item {
grid-column: span 2;
/* Элемент будет расположен на нескольких столбцах, занимая 2 столбца */
}
.item {
grid-column: auto;
/* Элемент будет автоматически размещен на доступных столбцах */
}
Используя свойства grid-row и grid-column, мы можем точно управлять размерами и позицией элементов в сетке, создавая гибкие и адаптивные макеты.
Позиционирование элементов с помощью grid-area
Свойство grid-area позволяет задавать имя или значение позиционирования элемента в сетке. Оно объединяет свойства grid-row-start, grid-row-end, grid-column-start и grid-column-end в одно простое свойство.
Для использования свойства grid-area, сначала мы должны определить имена областей сетки, используя свойство grid-template-areas в родительском контейнере. Затем мы можем присвоить элементу имя области, используя свойство grid-area.
Например, предположим у нас есть следующая сетка:
.container {
display: grid;
grid-template-areas:
"header header"
"sidebar content"
"footer footer";
grid-template-rows: auto 1fr auto;
grid-template-columns: 200px 1fr;
}
.item {
grid-area: content; /* Позиционируем элемент в область content */
}
Таким образом, элемент с классом "item" будет позиционирован в область с именем "content" в нашей сетке.
Использование свойства grid-area позволяет нам гибко позиционировать элементы в сетке, определяя имена областей и указывая их для каждого элемента.
На этом всё! Если вам нравится такой формат гайдов, то подписывайтесь или переходите по ссылке, где я рассказываю про display: flex.
