Css grid layout: CSS Grid Layout — CSS: Cascading Style Sheets — Вебджем.рф

Содержание

CSS Grid Layout. Основы

Создадим несколько блоков внутри главного контейнера.

.container {
  background-color: gray;
}
.box {
  color: #333;
  border-radius: 10px;
  padding: 20px;
  font-size: 150%;
}
  
.box-1 {
    background-color: red;
}
.box-2 {
    background-color: orange;
}
.box-3 {
    background-color: yellow;
}
.box-4 {
    background-color: green;
}
.box-5 {
    background-color: blue;
}
.box-6 {
    background-color: pink;
}
.box-7 {
    background-color: violet;
}
<div>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
</div>

Зададим свойства контейнеру и дочерним блокам. Пока мы не используем Grid CSS Layout. У контейнера есть фон, который виден в углах блоков. Каждому блоку присвоен цвет, чтобы видеть их поведение в различных режимах.

Блоки ведут себя ожидаемо, сверху вниз.

Сетка.

display:grid

Добавим в контейнер свойство display:grid.

.container {
  background-color: gray;
  display: grid;
}

Ничего не изменится. Пока мы только заявили о своём намерении использовать сетку.

Столбцы. grid-template-columns

Добавим дополнительное свойство grid-template-columns

grid-template-columns: 200px auto 50px;

Мы разбили страницу на три столбца. Первый столбец имеет ширину 200 пикселей, третий столбец имеет ширину 50 пикселей, а второй столбец вычисляет свой размер автоматически. Если вы будете менять размеры страницы, то второй столбец автоматически будет сжиматься или расширяться. При желании вы можете использовать и фиксированное значение.

Ряды. grid-template-rows

Кроме столбцов, мы можем указать число рядов и высоту каждого ряда. Добавим grid-template-rows.

grid-template-rows: 50px 50px;

По идее у нас должна появиться сетка 2х3 (два ряда с тремя столбцами).

В примере у нас использовалось семь блоков, временно оставим только шесть блоков.

Если бы мы оставили семь блоков, то седьмой перешёл бы на третий ряд самостоятельно, не обращая внимания на наше желание иметь сетку размером 2х3. Поэтому нужно следить за поведением блоков.

Другой случай — создадим сетку 3х3 из девяти квадратов, но поместим только шесть блоков.

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

Мы видим сетку 3×2 на странице, хотя создавали сетку 3×3. Но у нас есть только шесть элементов, чтобы заполнить сетку. Если бы у нас было ещё три блока, то и нижний ряд был бы заполнен.

Промежутки. grid-gap

Не хотим, чтобы блоки прилипали друг к другу? Добавляем ещё одно свойство

grid-gap.

grid-gap: 10px;

Обратите внимание, что мы указали высоту только для двух рядов. Остальные ряды останутся со своими значениями по умолчанию. Можно добавить третий ряд блоков, не указывая их размеры и посмотреть, что получится.

Ширина рядов по умолчанию. grid-auto-rows

Если мы хотим переопределить значение по умолчанию, то подключаем свойство grid-auto-rows:

grid-auto-rows: 100px;

Теперь по умолчанию у рядов будет высота 150 пикселей.

Индивидуальные промежутки. grid-column-gap/grid-row-gap

Для промежутков между ячейками таблицы использовалось свойство grid-gap, которое действовало между строками и столбцами. Можно указать значения индивидуально через grid-column-gap и grid-row-gap

grid-column-gap: 20px;
grid-row-gap: 5px;

Вернуться в раздел о CSS Grid Layout

Введение в CSS Grid Layout (с примерами)

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

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

Что такое Grid?

CSS Grid позволяет нам создавать лучшие макеты, используя сетку в браузере. До CSS Grid нам приходилось либо использовать нашу собственную систему сетки, либо что-то вроде Bootstrap.

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

CSS Grid упрощает разработку простых и сложных макетов. В этом блоге мы изучим некоторые основные термины, а затем продолжим работу с простым примером макета.

Основные термины

Основные термины, связанные с CSS Grid:

Колонки (Columns)
Ряды (Rows)
Ячейки (Cells)
Линии сетки (Grid Lines)
Канва (Gutter)

Все термины объяснены на диаграмме выше.

Этот пример представляет собой сетку столбцов 3×2, что означает 3 столбца и 2 строки.

Пример макета

Теперь, когда основные понятия не нужны, мы собираемся использовать эти понятия для создания примера макета, подобного приведенному ниже:

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

Ниже приведен пример HTML для этого примера.

<div>
  <header>HEADER</header>
  <nav>NAV</nav>
  <div>CONTENTS</div>
  <aside>ASIDE</aside>
  <footer>FOOTER</footer>
</div>

Теперь, когда у нас есть HTML, давайте углубимся в CSS. Прежде всего, давайте дадим ему немного стиля, чтобы наш HTML выглядел как выше. Эти правила CSS не являются частью сетки CSS, поэтому вы можете их опустить, если хотите.

.wrapper * {
  background: orange;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 1px;
  margin-right: 1px;
}

Как видите, я стилизую все элементы внутри контейнера-обертки. Я настраиваю цвет фона orange и задаю отступы bottom и right. я устанавливаю flex только для выравнивания элементов по центру.

Далее, давайте перейдем к части CSS Grid.

.wrapper {
  display: grid;
  grid-template-columns: 1fr 5fr 2fr;
  grid-template-rows: 5fr 20fr 5fr;
  grid-gap: 10px;
  height: 720px;
}

В приведенном выше фрагменте кода мы устанавливаем display как grid — отсюда и название этой темы. Вот как мы конвертируем контейнер в grid.

Далее мы устанавливаем столбцы и строки. Мы сделаем это, используя свойства

grid-template-columns и grid-template-rows. grid-template-columns позволяет нам установить количество столбцов с их соответствующими width. В свою очередь grid-template-rows позволяет нам устанавливать количество rows с их соответствующими height.

В приведенном выше примере есть 3 столбца с использованием первого столбца 1 fraction, второго столбца 5 fraction и третьего столбца 2 fractions. Единичная дробная единица означает «один кусок из множества частей, на которые мы делим это» .

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

Это означает, что первый и последний ряды занимают одинаковое количество высоты, то есть 5 fractions. А центральный ряд занимает оставшуюся часть высоты.

Далее мы также создадим отступ в 10 пикселей. Мы можем сделать это в CSS Grid, используя свойство grid-gap. Наконец, мы устанавливаем высоту для нашего контейнера-обертки.

Если мы посмотрим на это в браузере, то получим искомый результат:

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

Мы сделаем это, используя свойства grid-column-start и grid-column-end

header {
  grid-column-start: 1;
  grid-column-end: 4;
}
footer {
  grid-column-start: 1;
  grid-column-end: 4;
}

Как видите, верхний и нижний колонтитулы начинаются с grid line 1 и заканчиваются на grid line 4. Это позволяет им занимать все свои строки. Это даст точный результат, который мы ищем, как показано ниже:

Полный код

<!DOCTYPE html>
<html>
<head>
	<title>CSS Grid</title>
	<style type="text/css">
		.wrapper {
			display: grid;
			grid-template-columns: 1fr 5fr 2fr;
			grid-template-rows: 5fr 20fr 5fr;
			grid-gap: 10px;
			height: 720px;
		}
		header {
			grid-column-start: 1;
			grid-column-end: 4;
		}
		footer {
			grid-column-start: 1;
			grid-column-end: 4;
		}
		.wrapper * {
			background: orange;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-bottom: 1px;
			margin-right: 1px;
		}
	</style>
</head>
<body>
	<div>
		<header>HEADER</header>
		<nav>NAV</nav>
		<div>CONTENTS</div>
		<aside>ASIDE</aside>
		<footer>FOOTER</footer>
	</div>
</body>
</html>

Свойство области сетки CSS

❮ Назад Полное руководство по CSS Далее ❯

Пример

Сделать так, чтобы «item1» начинался со строки 2, столбца 1 и занимал 2 строки и 3 столбца:

. item1 {
grid-area: 2 / 1 / span 2 / span 3;
}

Попробуйте сами »

Другие примеры «Попробуйте сами» ниже.

Определение и использование

Свойство grid-area определяет сетку размер и расположение элемента в макете сетки, и является сокращенным свойством для следующие свойства:

сетка-ряд-начало
начало столбца сетки
сетка-ряд-конец
сетка-колонна-конец

Свойство grid-area также можно использовать для присвоения имени элементу сетки. Затем на именованные элементы сетки можно ссылаться с помощью grid-template-areas свойство сетчатый контейнер. См. примеры ниже.

Показать демо ❯

Значение по умолчанию:	авто / авто / авто / авто
Унаследовано:	нет
Анимация:	да. Читать о анимированном Попробуй
Версия:	Модуль компоновки сетки CSS, уровень 1
Синтаксис JavaScript:	объект . style.gridArea=»1 / 2 / диапазон 2 / диапазон 3″ Попробуй

Поддержка браузера

Числа в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.

Собственность
область сетки	57	16	52	10	44

Синтаксис CSS

grid-area: grid-row-start / grid-column-start / grid-row-end / конец столбца сетки | имя элемента ;

Значения свойств

Значение	Описание	Демо
сетка-ряд-начало	Указывает, с какой строки начинать отображение элемента.	Демонстрация ❯
сетка-столбец-начало	Указывает, в каком столбце начинать отображение элемента.	Демонстрация ❯
сетка-ряд-конец	Указывает, в какой строке строки следует прекратить отображение элемента или сколько строк следует охватить.	Демонстрация ❯
сетка-конец колонны	Указывает, в какой строке столбца прекратить отображение элемента или сколько столбцов охватывать.	Демонстрация ❯
имя элемента	Указывает имя для элемента сетки

Дополнительные примеры

Пример

Элемент 1 получает имя «myArea» и охватывает все пять столбцов в пяти столбцах. макет сетки:

.item1 {
grid-area: myArea;
}
.grid-container {
отображение: сетка;
grid-template-areas: ‘myArea myArea myArea myArea myArea’;
}

Попробуйте сами »

Пример

Пусть «myArea» охватывает два столбца в сетке из пяти столбцов (знаки точки представлять элементы без имени):

. item1 {
grid-area: myArea;
}
.grid-container {
отображение: сетка;
grid-template-areas: ‘myArea myArea . . .’;
}

Попробуйте сами »

Пример

Сделайте так, чтобы «item1» занимал два столбца и две строки:

.grid-container {
grid-template-areas: ‘myArea myArea . . .’ ‘моя территория моя территория . . .’;
}

Попробуйте сами »

Пример

Назовите все элементы и создайте готовый к использованию шаблон веб-страницы:

.item1 {область сетки: заголовок; }
.item2 { область сетки: меню; }
.элемент3 { область сетки: основная; }
.item4 { область сетки: справа; }
.item5 {область сетки: нижний колонтитул; }

.grid-container {
области шаблона сетки:
‘заголовок заголовка заголовок заголовка заголовка’
‘главное меню main main right’
‘menu footer footer footer footer нижний колонтитул;
}

Попробуйте сами »

Связанные страницы

Учебник по CSS: CSS Grid Layout

❮ Предыдущая Полное руководство по CSS Следующий ❯

ВЫБОР ЦВЕТА

Лучшие учебники

Учебник HTML
Учебник CSS
Учебник JavaScript
How To Tutorial
Учебник SQL
Учебник Python
Учебник W3.

CSS
Учебник Bootstrap
Учебник PHP
Учебник Java
Учебник C++
Учебник jQuery

902 Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

Основные примеры

Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

FORUM | О

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

Свойство CSS grid-row

❮ Предыдущий Полное руководство по CSS Далее ❯

Пример

Сделать так, чтобы «item1» начинался с строки 1 и занимал 2 строки:

.item1 {
grid-row: 1 / span 2;
}

Попробуйте сами »

Определение и использование

Свойство grid-row определяет сетку размер и расположение элемента в макете сетки, и является сокращенным свойством для следующие свойства:

сетка-ряд-начало
сетка-ряд-конец

Показать демо ❯

Значение по умолчанию:	авто / авто
Унаследовано:	нет
Анимация:	да. Читать о анимированном Попробуй
Версия:	Модуль компоновки сетки CSS, уровень 1
Синтаксис JavaScript:	объект .style.gridRow=»2 / диапазон 2″ Попробуй

Поддержка браузера

Числа в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.

Собственность
сетка-ряд	57	16	52	10	44

Синтаксис CSS

grid-row: grid-row-start / сетка-ряд-конец ;

Значения свойств

Значение	Описание	Демо
сетка-ряд-начало	Указывает, с какой строки начинать отображение элемента.	Демонстрация ❯
сетка-ряд-конец	Указывает, в какой строке следует прекратить отображение элемента или сколько строки для охвата.	Демонстрация ❯

Дополнительные примеры

Пример

Вы можете использовать значения row-line вместо количества строк для охвата:

.item1 {
grid-row: 1 / 3;
}

Попробуйте сами »

Связанные страницы

Учебник по CSS: CSS Grid Layout

❮ Предыдущая Полное руководство по CSS Следующий ❯

ВЫБОР ЦВЕТА

Лучшие учебники

Учебник по HTML
Учебник CSS
Учебник JavaScript
How To Tutorial
Учебник SQL
Учебник Python
Учебник W3.CSS
Учебник Bootstrap
Учебник PHP
Учебник Java
Учебник C++
Учебник jQuery

2 Top 9 HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.

Css grid layout: CSS Grid Layout — CSS: Cascading Style Sheets

CSS Grid Layout. Основы

Сетка.

Столбцы. grid-template-columns

Ряды. grid-template-rows

Промежутки. grid-gap

Ширина рядов по умолчанию. grid-auto-rows

Индивидуальные промежутки. grid-column-gap/grid-row-gap

Реклама

Введение в CSS Grid Layout (с примерами)

Что такое Grid?

Основные термины

Пример макета

Полный код

Свойство области сетки CSS

Пример

Определение и использование

Поддержка браузера

Синтаксис CSS

Значения свойств

Дополнительные примеры

Пример

Пример

Пример

Пример

Связанные страницы

ВЫБОР ЦВЕТА

Лучшие учебники

Основные примеры

Свойство CSS grid-row

Пример

Определение и использование

Поддержка браузера

Синтаксис CSS

Значения свойств

Дополнительные примеры

Пример

Связанные страницы

ВЫБОР ЦВЕТА

Лучшие учебники

Добавить комментарий Отменить ответ

Рубрики