Узнайте, как использовать сетки CSS для простого создания сложных макетов.

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

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

Сетчатые контейнеры и предметы

Вы можете применять свойства сетки CSS к двум основным типам элементов: родительским и дочерним. Когда вы устанавливаете для свойства отображения значение «сетка» для родительского элемента, он преобразует этот элемент в контейнер сетки. Любой дочерний элемент внутри этого контейнера сетки становится элементом сетки, наследуя примененные свойства сетки.

Вот как это представлено:

Элемент сетки также может стать контейнером сетки. Теперь вы можете называть макет вложенной сеткой — сеткой внутри сетки. Основной контейнер сетки теперь называется внешней сеткой, а контейнер, превращенный в сетку, становится внутренней сеткой.

instagram viewer

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

Вот как это выглядит:

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

Имейте в виду, что существуют свойства сетки для контейнеров сетки, а другие предназначены для элементов сетки.

Линии и дорожки сетки

Прежде чем вы начнете использовать сетку CSS, вам следует ознакомиться с двумя ключевыми терминами:

  1. Линии сетки: Линии сетки относятся к горизонтальным и вертикальным линиям, которые образуют сетку в макете сетки CSS. Они определяют начальную и конечную точки строк и столбцов, помогая организовать расположение объектов в сетке. Эти линии подобны краям коробки; у них есть номера, которые помогут вам ссылаться на элементы при позиционировании. Здесь они обозначены красной пунктирной линией:
  2. Сетка дорожек: это промежутки между линиями сетки, которые определяют строки и столбцы. Они подобны строительным блокам макета сетки. На изображении выше цветная область внутри каждого элемента представляет собой дорожку сетки.

Думайте о линиях и дорожках сетки как о строительных блоках макета сетки, как о линиях на листе миллиметровой бумаги. Когда горизонтальная линия сетки пересекается с вертикальной линией сетки, она образует ячейку прямоугольной формы. Эти ячейки действуют как контейнеры, в которых вы можете размещать элементы сетки.

Свойства контейнера сетки CSS

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

Шаблон сетки

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

  • строки-шаблона сетки: устанавливает высоту строк.
  • столбцы-шаблона сетки: определяет ширину столбца.

Вот некоторые примеры:

Использование пикселей:

.grid-container {
display: grid;
grid-template-columns: 250px 250px 250px;
grid-template-rows: 250px 250px;
}

Использование процентов:

.grid-container {
grid-template-columns: 25% 50% 25%;
grid-template-rows: 50% 50%;
}

Использование фр.:

.grid-container {
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 1fr 2fr;
}

Использование ключевых слов auto и minmax():

.grid-container {
grid-template-columns: autominmax(150px, 1fr) auto;
grid-template-rows: 100pxauto;
}

Использование повтора() для согласованного размера:

.grid-container {
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 150px);
}

Области автоматического размещения и шаблона сетки

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

Области шаблона сетки: воспринимайте области шаблонов сетки как создание макета с использованием именованных зон. Это все равно, что давать названия комнатам на плане этажа. Вы можете обращаться к этим именам областей при размещении элементов сетки. Например:

.grid-container {
grid-template-areas:'headerheaderheaderheader'
 'sidebarmainmainright'
 'sidebarcontentcontentright'
 'footerfooterfooterfooter';
}

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

Выравнивание в CSS Grid

Свойства выравнивания можно использовать для управления расположением элементов сетки внутри ячеек сетки. Свойства:

  • оправдание-элементы: управляет горизонтальным выравниванием элементов внутри ячейки сетки.
    • Ценности: начало, конец, центр и растяжение.
  • выравнивание элементов: управляет вертикальным выравниванием элементов внутри ячейки сетки.
    • Ценности: начало, конец, центр и растяжение.
  • оправдание-содержание: выравнивает всю сетку внутри контейнера по горизонтальной оси.
    • Ценности: начало, конец, центр, растяжение, пространство между, пространство вокруг и пространство-равномерно.
  • выровнять-контент: выравнивает всю сетку внутри контейнера по вертикальной оси.
    • Ценности: начало, конец, центр, растяжение, пространство между, пространство вокруг и пространство-равномерно.

Вот пример:

.grid-container {
grid-template-columns: 1fr 1fr;
justify-items: center;
align-items: center;
justify-content: space-between;
align-content: center;
}

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

Разрыв в сетке

Зазор в сетке — это пространство между строками и столбцами в макете сетки. Это помогает создать визуальное разделение и добавляет пространство между элементами сетки.

разрыв в энергосистеме Свойство позволяет установить разрыв между строками и столбцами. Для его определения можно использовать различные единицы измерения, такие как пиксели (px), проценты (%), единицы em (em) и другие.

.grid-container {
grid-gap: 20px;
}

В этом примере контейнер сетки имеет два столбца с зазором в 20 пикселей между ними. Этот интервал визуально разделяет столбцы и улучшает макет.

Свойства элемента сетки CSS

Вот некоторые ключевые свойства, которые управляют поведением отдельных элементов сетки в макете сетки CSS, а также примеры:

начало строки сетки и конец строки сетки:

  • Определяет начальную и конечную строки для элемента.
  • Значениями могут быть номера строк, «диапазон n» или «авто». 
.grid-item-1 {
grid-row-start: 2;
grid-row-end: 4;
}

Этот код помещает Элемент сетки 1 от линии второго ряда до линии четвертого ряда.

начало столбца сетки и конец столбца сетки:

  • Определяет начальную и конечную строки столбцов для элемента.
  • Значениями могут быть номера строк, «диапазон n» или «авто». 
.grid-item-2 {
grid-column-start: 1;
grid-column-end: 3;
}

Этот код помещает Элемент сетки 2 от первой строки столбца до третьей строки столбца.

область сетки:

  • Определяет размер и положение элемента сетки внутри сетки путем ссылки на именованные линии сетки в области шаблонов сетки.
  • Как упоминалось ранее, предопределенные имена областей уже используются в области шаблонов сетки свойство. Вот пример того, как использовать его вместе с область сетки. 
.header {
grid-area: header;
}
.sidebar {
grid-area: sidebar;
}
.main {
grid-area: main;
}
.content {
grid-area: content;
}
.right {
grid-area: right;
}
.footer {
grid-area: footer;
}

Вот результат:

оправдываться:

  • Выравнивает отдельные элементы внутри ячейки по горизонтали.
  • Значениями могут быть начало, конец, центр и растяжение. 
.grid-item-5 {
justify-self: center;
}

Этот код горизонтально центрирует Элемент сетки 5 внутри своей клетки.

выровнять-самостоятельно:

  • Выровняйте отдельные элементы по вертикали внутри ячейки.
  • Значениями могут быть начало, конец, центр и растяжение. 
.grid-item-1 {
align-self: end;
}

Этот код выравнивает Элемент сетки 1 до дна своей ячейки.

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

Создание адаптивных макетов с использованием CSS-сеток

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

  • Медиа-запросы: Вы можете использовать медиа-запросы применять различные макеты сетки в зависимости от размеров экрана. Например, вам может потребоваться изменить порядок элементов сетки или настроить ширину столбцов для небольших экранов.
  • Гибкие единицы: используйте относительные единицы измерения, такие как проценты и fr, чтобы элементы и столбцы сетки корректировались пропорционально доступному пространству.
  • мин Макс(): Использовать мин Макс() функция для указания диапазона размеров столбцов или строк сетки. Это гарантирует, что элементы не будут выглядеть слишком маленькими или слишком большими на разных экранах.

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

Изучите возможности CSS Grid Layout

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

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