CSS свойства, связанные с сеткой
Эта статья объясняет свойства CSS, связанные с сеткой.
Вы можете узнать, как описывать сетку и встроенную сетку.
YouTube Video
HTML для предварительного просмотра
css-grid.html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>CSS Properties Example</title>
7 <link rel="stylesheet" href="css-base.css">
8 <link rel="stylesheet" href="css-grid.css">
9</head>
10<body>
11 <!-- Header -->
12 <header>
13 <h1>CSS Properties For Layout</h1>
14 </header>
15
16 <!-- Main content -->
17 <main>
18 <header>
19 <h2>Layout Related Properties</h2>
20 </header>
21 <article>
22 <h3>grid</h3>
23 <section style="width: 100%; height: 350px;">
24 <header><h4>display: grid; grid-template-columns: 100px 200px auto; grid-template-rows: 100px auto 50px;</h4></header>
25 <section class="sample-view">
26 <div class="grid-box">
27 <div class="grid-item">Item 1</div>
28 <div class="grid-item">Item 2</div>
29 <div class="grid-item">Item 3</div>
30 <div class="grid-item">Item 4</div>
31 <div class="grid-item">Item 5</div>
32 <div class="grid-item">Item 6</div>
33 </div>
34 </section>
35 </section>
36 <section style="width: 100%; height: 550px;">
37 <header><h4>display: grid; grid-template-columns: 120px 1fr 80px; grid-template-rows: 100px 1fr 100px;</h4></header>
38 <section class="sample-view">
39 <div class="grid-container" style="color: #666;">
40 <header class="grid-header">Header</header>
41 <aside class="grid-sidebar">Sidebar</aside>
42 <article class="grid-content">
43 <p>Content</p>
44 </article>
45 <aside class="grid-ads">Ads</aside>
46 <footer class="grid-footer">Footer</footer>
47 </div>
48 </section>
49 </section>
50 </article>
51 <article>
52 <h3>gap</h3>
53 <section style="height: 300px;">
54 <header><h4>display: grid; gap: 30px 10px;</h4></header>
55 <section class="sample-view">
56 <div class="gap-grid-container">
57 <div>Item 1</div>
58 <div>Item 2</div>
59 <div>Item 3</div>
60 <div>Item 4</div>
61 <div>Item 5</div>
62 <div>Item 6</div>
63 </div>
64 </section>
65 </section>
66 <section>
67 <header><h4>display: flex; gap: 50px;</h4></header>
68 <section class="sample-view">
69 <div class="gap-flex-container">
70 <div>Item 1</div>
71 <div>Item 2</div>
72 <div>Item 3</div>
73 </div>
74 </section>
75 </section>
76 </article>
77 <article>
78 <h3>grid-template-areas</h3>
79 <section style="height: 350px;">
80 <header><h4>grid-template-areas: "header header" "sidebar content" "footer footer";</h4></header>
81 <section class="sample-view">
82 <div class="grid-template-areas-container">
83 <div class="grid-template-areas-header">Header</div>
84 <div class="grid-template-areas-sidebar">Sidebar</div>
85 <div class="grid-template-areas-content">Content</div>
86 <div class="grid-template-areas-footer">Footer</div>
87 </div>
88 </section>
89 </section>
90 </article>
91 <article>
92 <h3>inline-grid</h3>
93 <section>
94 <header><h4>display: inline-grid</h4></header>
95 <section class="sample-view">
96 Here is an inline grid:
97 <span class="inline-grid-container">
98 <div class="inline-grid-item">1</div>
99 <div class="inline-grid-item">2</div>
100 <div class="inline-grid-item">3</div>
101 <div class="inline-grid-item">4</div>
102 </span>
103 This is contained within a paragraph.
104 </section>
105 </section>
106 </article>
107 </main>
108</body>
109</html>Сеточный макет
grid
1.grid-box {
2 display: grid;
3 grid-template-columns: 100px 200px auto;
4 grid-template-rows: 100px auto 50px;
5 gap: 10px;
6 background-color: lightblue;
7 border: none;
8 height: 200px;
9}
10
11.grid-item {
12 background-color: lightskyblue;
13 width: 100%;
14 padding: 0;
15 text-align: center;
16 border: 2px solid black;
17}Сетка - это система компоновки для выравнивания элементов в двухмерных строках и столбцах. С помощью сетки вы можете легко и гибко создавать сложные макеты, которые было трудно реализовать с использованием традиционных методов float или position. Хотя flexbox отлично подходит для одноразмерных макетов, сетка лучше всего подходит для двухмерных макетов.
- Класс
grid-boxприменяет сеточный макет, указываяgridв свойствеdisplay. Этот элемент называется контейнером сетки. - Свойство
grid-template-columnsуказывает ширину столбцов сетки. В этом примере первый столбец имеет ширину 100px, второй столбец - 200px, а третий занимает оставшееся пространство (auto). - Свойство
grid-template-rowsзадает высоту строк сетки. Первая строка имеет высоту 100px, вторая строка автоматическая (auto), а третья строка имеет высоту 50px. - Свойство
gapзадает расстояние между элементами сетки. Добавление 10px пространства между столбцами и строками.
Основные термины
- Контейнер сетки - это элемент со свойством
display, установленным в значениеgrid, его дочерние элементы становятся элементами сетки. - Элементы сетки - это дочерние элементы, расположенные непосредственно под контейнером сетки.
Основные свойства сетки
grid-template-columns & grid-template-rows
1.container {
2 grid-template-columns: 1fr 2fr 1fr;
3}- Свойства
grid-template-columnsиgrid-template-rowsопределяют размер каждого столбца и строки. - Могут использоваться такие единицы, как
pxи%, а такжеfr(доля), чтобы указать пропорцию оставшегося пространства.- В этом примере три колонки, и вторая колонка в два раза шире остальных.
grid-column & grid-row
1.container {
2 display: grid;
3 grid-template-columns: repeat(4, 1fr); /* 4 columns */
4 grid-template-rows: repeat(3, 100px); /* 3 rows */
5}
6
7.item {
8 grid-column: 2 / 4;
9 grid-row: 1 / 3;
10}grid-columnиgrid-rowуказывают, в какой колонке или строке будет размещён элемент сетки.- В этом примере элемент охватывает от 2-й колонки до 4-й и от 1-й строки до 3-й.
grid-auto-rows & grid-auto-columns
1.container {
2 display: grid;
3 grid-template-rows: 100px 200px; /* Explicitly define 2 rows */
4 grid-template-columns: 1fr 2fr; /* Explicitly define 2 columns */
5 grid-auto-rows: 150px; /* Automatically added rows will be 150px */
6 grid-auto-columns: 100px; /* Automatically added columns will be 100px */
7}
8
9.item {
10 grid-column: 3; /* Positioned in the 3rd column (auto-generated) */
11 grid-row: 3; /* Positioned in the 3rd row (auto-generated) */
12}grid-auto-rowsиgrid-auto-columns- это свойства, которые управляют размером строк и колонок, создаваемых автоматически, если линии сетки или колонки не определены явно.- В этом примере явно определены 2 строки и 2 колонки, но при добавлении новых элементов будут автоматически созданы новые строки или колонки согласно
grid-auto-rowsиgrid-auto-columns.
- В этом примере явно определены 2 строки и 2 колонки, но при добавлении новых элементов будут автоматически созданы новые строки или колонки согласно
justify-items & align-items
1.container {
2 justify-items: center; /* Center items horizontally */
3 align-items: center; /* Center items vertically */
4}- Выравнивание элементов сетки по горизонтали (
justify-items) и по вертикали (align-items).
grid-area
1/* grid-area syntax
2grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
3*/
4.item {
5 grid-area: 1 / 2 / 3 / 4;
6}grid-areaодновременно указывает, в какой области контейнера сетки должен быть размещен элемент сетки.- В этом примере это означает занятие области от 1-й строки до 3-й и от 2-й колонки до 4-й.
gap
1.container {
2 gap: 10px 20px; /* 10px space between rows, 20px space between columns */
3}gapдобавляет пространство между столбцами и строками. Вы также можете указать расстояние между столбцами и строками отдельно, используя свойстваcolumn-gapиrow-gap.
grid-auto-flow
1.container {
2 grid-auto-flow: column; /* Add items in the column direction */
3}grid-auto-flow— это свойство, которое задает направление размещения элементов: по строкам или по столбцам.
Пример сложной компоновки
1.grid-container {
2 display: grid;
3 grid-template-columns: 120px 1fr 80px;
4 grid-template-rows: 50px 1fr 50px;
5 gap: 10px;
6 background-color: transparent;
7 border: none;
8 height: 400px;
9}
10
11.grid-header {
12 grid-column: 1 / 4;
13 background-color: lightblue;
14}
15
16.grid-sidebar {
17 grid-column: 1 / 2;
18 grid-row: 2 / 3;
19 height: 100%;
20 background-color: lightslategray;
21 color: white;
22}
23
24.grid-content {
25 grid-column: 2 / 3;
26 grid-row: 2 / 3;
27 background-color: lightskyblue;
28}
29
30.grid-content p {
31 margin: 0;
32 padding: 0;
33 height: 260px;
34}
35
36.grid-ads {
37 grid-column: 3 / 4;
38 grid-row: 2 / 3;
39 height: 100%;
40 background-color: lightsteelblue;
41}
42
43.grid-footer {
44 grid-column: 1 / 4;
45 background-color: lightgray;
46}Таким образом, grid позволяет создать полный макет веб-страницы с использованием простого кода.
- В этом примере есть три столбца (боковая панель, основной контент и реклама) и три строки (шапка, контент и футер).
- Заголовок и нижний колонтитул занимают всю ширину страницы, с содержимым в центре, а боковой панелью и рекламой по бокам.
Преимущества сетки
К преимуществам сетки относятся следующие пункты:.
- Простая двумерная компоновка: управление компоновкой как по строкам, так и по колонкам позволяет достичь даже сложных компоновок с меньшим количеством кода.
- Совместимость с адаптивным дизайном: система сетки упрощает создание адаптивных дизайнов, подстраивающихся под различные размеры экранов.
Свойство gap
1.gap-grid-container {
2 display: grid;
3 grid-template-columns: repeat(3, 1fr);
4 gap: 30px 10px;
5 background-color: transparent;
6 border: none;
7 height: 200px;
8}
9
10.gap-grid-container div {
11 width: 100px;
12 background-color: lightskyblue;
13}
14
15.gap-flex-container {
16 display: flex;
17 gap: 50px;
18}
19
20.gap-flex-container div {
21 width: 80px;
22 background-color: lightgreen;
23}Свойство gap используется в макетах сетки и flexbox для задания расстояния (промежутков) между элементами. С помощью этого свойства вы можете легко добавить пространство между дочерними элементами.
- В классе
gap-grid-containerустановлен вертикальный промежуток30pxи горизонтальный10pxмежду каждым элементом. Поскольку сетка с 3 колонками создается с помощьюgrid-template-columns, промежутки применяются вертикально и горизонтально между каждым элементом. В классеgap-flex-containerпромежуток размером50pxприменяется между тремя элементами в flexbox.
Базовый синтаксис
1.container {
2 display: grid; /* or flex */
3 gap: <row-gap> <column-gap>;
4}row-gapопределяет промежуток между строками. Это вертикальный промежуток в сетке или flex-раскладке.column-gapопределяет промежуток между колонками. Это горизонтальный промежуток.
Если два значения не указаны, одно значение применяется как для row-gap, так и для column-gap.
Преимущества свойства gap
К преимуществам свойства gap относятся следующие:.
- Простая настройка промежутков: код для установки промежутков между дочерними элементами становится проще, исключая необходимость задавать дополнительные отступы или внутренние поля между элементами.
- Гибкая адаптация: легко поддерживает адаптивный дизайн, позволяя гибко настраивать макет.
Свойство grid-template-areas
1.grid-template-areas-container {
2 display: grid;
3 grid-template-columns: 1fr 2fr; /* 2 columns */
4 grid-template-rows: auto auto; /* 2 rows */
5 grid-template-areas:
6 "header header"
7 "sidebar content"
8 "footer footer"; /* In the 3rd row, the footer spans across */
9 gap: 10px;
10 height: 250px;
11}
12
13.grid-template-areas-container div {
14 width: 100%;
15 height: 100%;
16}
17
18.grid-template-areas-header {
19 grid-area: header; /* Placed in the "header" area */
20 background-color: lightblue;
21}
22
23.grid-template-areas-sidebar {
24 grid-area: sidebar; /* Placed in the "sidebar" area */
25 background-color: lightslategray;
26}
27
28.grid-template-areas-content {
29 grid-area: content; /* Placed in the "content" area */
30 background-color: lightskyblue;
31}
32
33.grid-template-areas-footer {
34 grid-area: footer; /* Placed in the "footer" area */
35 background-color: lightsteelblue;
36}Свойство grid-template-areas позволяет задать названия областям внутри контейнера сетки и использовать эти названия для упрощенного управления позицией элементов. Использование этого свойства позволяет визуально интуитивно создавать описание макета.
Элементы, расположенные в именованных областях, заданных с помощью свойства grid-template-areas, должны иметь то же имя, заданное с помощью свойства grid-area. Даже если элементы занимают несколько ячеек, их позиция корректно определяется автоматически.
В этом примере сетка создается следующим образом:.
- В первой строке "header" размещается на двух колонках.
- "Sidebar" размещен слева, а "content" справа во второй строке.
- "Footer" размещен на двух колонках в третьей строке.
Основное использование
1grid-template-areas:
2 "area1 area2 area3"
3 "area1 area4 area5";В свойстве grid-template-areas название области задается для каждой строки. Размещая элементы в области с заданными названиями, можно легко создавать макеты.
- В этом примере создается сетка из 2 строк и 3 колонок, и каждая ячейка именуется как area1, area2 и так далее.
Определение пустых ячеек с помощью .
1grid-template-areas:
2 "header header header"
3 "sidebar . content"
4 "footer footer footer";Если вы хотите иметь пустые ячейки в вашем макете, вы можете обозначить их с помощью . (точки).
- Как в этом примере, указав . между sidebar и content, вторая колонка станет пустой.
Преимущества свойства grid-template-areas
Преимущества свойства grid-template-areas включают следующие аспекты.
- Визуальная разметка: Это позволяет визуально отображать макет, что упрощает понимание дизайна.
- Легкое перемещение элементов: вы можете легко изменить расположение элементов, изменяя определения областей в CSS без изменения HTML.
Примечания
При использовании свойства grid-template-areas важно учитывать следующие моменты.
- Количество имен в каждой строке должно соответствовать количеству определенных колонок.
- Назначение одного и того же имени нескольким ячейкам объединяет их, но при назначении в разных строках или колонках область должна быть квадратной.
inline-grid
1.inline-grid-container {
2 display: inline-grid;
3 grid-template-columns: 1fr 1fr;
4 gap: 5px;
5 background-color: lightblue;
6}
7.inline-grid-item {
8 background-color: lightskyblue;
9 width: 50px;
10 padding: 0;
11 margin: 0;
12}inline-grid — это одно из значений свойства display в CSS. Использование этого свойства делает элемент контейнером на уровне строки, создавая внутренний контекст форматирования сетки. В отличие от display: grid, он ведет себя как строчный элемент в потоке документа.
Примеры использования inline-grid
inline-grid используется не так часто, как grid, но может быть эффективным в определенных сценариях.
-
Сетка в строчном контексте: Полезно, когда вы хотите разместить сетку рядом с текстовым содержимым или другими строчными элементами. Например, это полезно, когда требуется структура сетки для кнопок, значков, меток и т. д., но вы хотите отображать ее строчно, не нарушая поток текста.
-
Управление компоновкой в строчных элементах: Даже когда в строчных элементах таких как ссылки, кнопки или span требуется сложная компоновка,
inline-gridможет управлять внутренней структурой с помощью сетки, сохраняя строчное отображение.
1<button class="inline-grid">
2 <span>Icon</span>
3 <span>Text</span>
4</button>В этом случае кнопка отображает иконки и текст в сетке, оставаясь строчным элементом в потоке документа.
- Отзывчивые строчные компоненты:
inline-gridможно использовать для небольших компонентов, которые являются частью строчного содержимого и требуют сеточной компоновки. Например, это подходит для строчных форм, значков, продуктовых меток и т. д., где вы хотите настроить компоновку с помощью сетки, сохраняя ее строчной.
Выравнивание и размеры inline-grid
1.inline-grid {
2 display: inline-grid;
3 vertical-align: middle;
4}- Как и другие строчные элементы,
inline-gridподдерживает вертикальное выравнивание относительно окружающего контента. Вы можете управлять выравниванием сетки с помощью свойстваvertical-align.
1.inline-grid {
2 display: inline-grid;
3 width: 200px;
4 height: 100px;
5}- Что касается размера, элемент
inline-gridзанимает только ширину, необходимую для его содержимого сетки. При необходимости вы можете явно указать ширину, высоту и минимальные/максимальные размеры.
1.inline-grid {
2 display: inline-grid;
3 grid-template-columns: auto 1fr;
4}Также возможно, что макет самой сетки определяет размер контейнера inline-grid, и эта тенденция усиливается при использовании гибких единиц, таких как fr, auto и проценты.
Вы можете следовать этой статье, используя Visual Studio Code на нашем YouTube-канале. Пожалуйста, также посмотрите наш YouTube-канал.