Css grid что это: CSS Grid понятно для всех / Хабр

Содержание

CSS Grid понятно для всех / Хабр

Что такое Grid?

Grid представляет собой пересекающийся набор горизонтальных и вертикальных линий — один набор определяет столбцы, а другой строки. Элементы могут быть помещены в сетку, соответственно строкам и столбцам.

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

В 2020 году поддержка браузерами достигает 94 %

Grid контейнер

Мы создаем grid контейнер, объявляя display: grid или display: inline-grid на элементе. Как только мы это сделаем, все прямые дети этого элемента станут элементами сетки.

<body>
 <div>
  <div>
   <h2>Header</h2>
  </div>
  <div>
   <h2>Navbar</h2>
  </div>
  <div>
   <h2>Article</h2>
  </div>
  <div>
   <h2>Ads</h2>
  </div>
 </div>
</body>

.row {
 display: grid;
 margin: auto;
 grid-template-rows: 60px 1fr ;
 grid-template-columns: 20% 1fr 15%;
 grid-gap: 10px;
 width: 1000px;
 height: 1000px;
 justify-items: center;
 justify-content: space-between;
 grid-template-areas:
 "header header header"
 "nav article ads"; 
}

grid-template-rows — это CSS свойство, которое определяет названия линий и путь размера функции grid rows.

CSS свойство grid-row определяет с какой строки в макете сетки будет начинаться элемент, сколько строк будет занимать элемент, или на какой строке завершится элемент в макете сетки. Является сокращенным свойством для свойств grid-row-start и grid-row-end.

Свойство CSS grid-gap является сокращенным свойством для grid-row-gap и grid-column-gap, определяющего желоба между строками и столбцами сетки.

Свойство grid-template-areas определяет шаблон сетки ссылаясь на имена областей, которые заданы с помощью свойства grid-area.

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

С помощью свойства

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

.header{
grid-area: header;
}
.nav{
grid-area: nav;
}
.article{
grid-area: article;
}
.ads{
grid-area: ads;
}

Создаем шаблон сайта с CSS Grid:

Изменяем шаблон

Вы можете изменить шаблон просто перераспределив грид-области в grid-template-areas.

Таким образом, если мы сменим на это:

grid-template-areas:
 "nav header header"
 "nav article ads"; 
}

То в результате получим такой шаблон:

Гриды с медиа запросами

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

Это делает CSS Grid идеальным для медиа запросов. Мы можем просто переназначить значения в ASCII-графике и обернуть результат в конечный медиа запрос.

@media all and (max-width: 575px) {
.row {
grid-template-areas:
"header"
"article"
"ads"
"nav";
grid-template-rows: 80px 1fr 70px 1fr ;
grid-template-columns: 1fr;
}
}

В результате получим:

Таким образом, все дело состоит в переназначении значений в свойстве grid-template-areas.

Заключение

В данной статье мы рассмотрели всего лишь верхушку CSS Grid Layout айсберга. Иногда сложно поверить своим глазам какие штуки удается сделать при помощи CSS Grid. Это разрыв всех шаблонов. И мне это нравится.

Я вам советую обратить внимание на данную спецификацию и потратить немного своего времени на ее изучение. Поверьте, в будущем вам это точно пригодится и не важно, пишете вы на React, Angular, Vue (вставьте свое). Grid’ы пришли надолго.

Обзор CSS Grid — технологии для упрощения разметки HTML-страниц

Появившись в 2011 году, технология CSS Grid продолжает вызывать все больше интереса. Эта статья — небольшое руководство по технологии с кратким описанием самых интересных возможностей и функций. Она будет полезна фронт-енд разработчикам, а также другим специалистам веб-разработки и дизайна.

Спецификация CSS Grid полностью меняет подход к разработке пользовательских интерфейсов, позволяя менять расположение grid-элементов, не затрагивая HTML.

Технология разрабатывалась более 5 лет и начала поддерживаться современными браузерами в середине 2017 года. CSS Grid упрощает описание разметки страницы, делая вёрстку HTML-страниц более адаптивной и простой.

Что такое Grid. Основные термины

Grid коренным образом меняет процесс создания адаптивных интерфейсов, включая:

фиксированные и гибкие размеры полос;
расположение элемента;
управление выравниванием;
управление перекрывающимся контентом.

Прежде чем приступать к работе с CSS Grid, нужно разобраться с основными терминами. На основе этих терминов построена вся спецификация. Каждый элемент тесно связан друг с другом и отвечает за определенную часть grid-контейнера.

Grid container (грид-контейнер) — это набор пересекающихся горизонтальных и вертикальных grid-линий, которые делят пространство на grid-области, в которые могут быть помещены grid-элементы. Внутри grid-контейнера есть два набора grid-линий: один определяет ось столбцов, другой определяет ось строк.

К Grid container применяется display: grid. Это прямой родитель для всех элементов сетки.

<div class="container">
    <div class="item item-1"></div>
    <div class="item item-2"></div>
    <div class="item item-3"></div>
</div>

Элементы сетки — дочерние элементы (прямые потомки) контейнера.

Здесь item — это элемент сетки, но не sub-item.

<div class="container">
    <div class="item"></div> 
    <div class="item">
        <p class="sub-item"></p>
    </div>
<div class="item"></div>
</div>

Grid lines (грид-линии) — это горизонтальные и вертикальные разделители grid-контейнера. Эти линии находятся по обе стороны от столбца или строки.

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

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

К грид-линиям можно привязывать грид-элементы — и по номерам, и по именам, как удобнее.

Грид-полосы — то, что ограничено парой соседних грид-линий. Вертикальные грид-полосы — это колонки грида (аналог столбцов таблицы), горизонтальные — ряды (аналог строк).

Grid cell — это наименьшая неделимая единица grid-контейнера, на которую можно ссылаться при позиционировании grid-элементов. Образуется на пересечении grid-строки (ряда) и grid-колонки.Аналог ячейки таблицы.

Grid area (грид-области) — это пространство внутри grid контейнера, в которое может быть помещен один или больше grid элементов. Этот элемент может состоять из одной или более grid ячеек.

Грид-области — прямоугольники из M×N смежных грид-ячеек (1×1 и больше). Каждая грид-область ограничена двумя парами грид-линий (парой вертикальных и парой горизонтальных). В них и размещаются грид-элементы.

Грид-областям тоже можно задавать имена.

Grid track (грид-интервалы) — это пространство между двумя смежными grid-линиями, вертикальными или горизонтальными. Аналог border-spacing в таблице.

.container { 
  grid-column-gap: 10px;
  grid-row-gap: 15px;
}

Различие Grid и Flexbox

Flexbox позволяет управлять элементами в одномерном пространстве.

Grid же — это двухмерный массив (в котором используются колонки и строки).

Это дает нам массу преимуществ по адаптивной трансформации и перестроению.

.grid {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr;
		grid-template-rows: 100px auto 100px;
	}

Сокращенная запись (rows / column).

.grid {
		grid-template: 100px auto 100px / 1fr 1fr 1fr 1fr;
	}

Строки и расположение элементов

В CSS Grid можно размещать элементы, используя номера строк. Есть возможность именовать строки, используя grid-area, а также возможность привязки к области Grid.

.wrapper {
		display: grid;
		grid-template-areas: 
		"a a b"
		"a a b"
		"c d d";
	}
	.item1 {grid-area: a;}
	.item2 {grid-area: b;}
	.item2 {grid-area: c;}
	.item2 {grid-area: d;}

Размеры полос (треков)

Сетку в Grid можно создавать с фиксированными размерами («px»), относительными размерами («em», «rem»), а также задавая гибкие размеры — ’%’ или ’fr’ (fraction). Новая единица рассчитывается самостоятельно.

Fr (fraction) не измеряется в привычных единицах, таких как «px», «em», «rem», etc, а рассчитывается самостоятельно.

Калькуляция в «fr»

Например, если доступное место составляет 900 px, и при этом первому элементу достается одна доля, а второму — две, то первый получает 1/3, а второй — 2/3 от 900 px.

<div class="grid">
		<div class="box item1">Item 1</div>
		<div class="box item2">Item 2</div>
		<div class="box item3">Item 3</div>
		<div class="box item4">Item 4</div>
	</div>

.grid {
		display: grid;
		grid-gap:20px;
		grid-template: 100px auto 100px /1fr 80px 3fr 20%;;
	}

Оси элементов в Grid

При работе с Grid у нас есть две оси для выравнивания элементов.

Ось column (столбца)

Когда мы используем свойства align-self и align-items, мы меняем выравнивание элемента в области сетки, которую поместили. Свойство align-items устанавливает свойство align-self для всех дочерних элементов сетки. Это означает, что вы можете установить свойство индивидуально, используя align-self по элементу сетки.

Ось row (строки)

Элементы управления justify-items и justify-self на оси row/inline:

<div class="grid">
	  <div class="box item1">Item 1</div>
	  <div class="box item2">Item 2</div>
	  <div class="box item3">Item 3</div>
	  <div class="box item4">Item 4</div>
	</div>

. grid {
	  display: grid;
	  grid-gap:20px;
	  grid-template: 100px auto 100px / 1fr 1fr 1fr 1fr;
	  align-items: stretch;
	}

.item1 {
	  background: #f00;
	  align-self: end;
	}
	.item2 {
	  background: #f0f;
	  align-self: flex-start;
	}
	.item3 {
	  background: #008000;
	  align-self: end;
	}
	.item4 {
	  background: #000;
	}

Препроцессоры

Препроцессоры Sass и Less поддерживают работу с Grid. Также с CSS Grid работают Stylus и PostCSS.

Софт

Google Chrome и Mozilla подсвечивают гриды расширением Firebug. Также для Chrome есть расширение Gridman — CSS Grid inspector.

Support

CSS-гриды уже есть в Safari 10.3, Firefox 61 и Chrome 63.

В IE10 & IE11 используется префикс «-ms-» для определения свойств Grid. К сожалению, эти браузеры поддерживают только одну из самых ранних ограниченных спецификаций Grid Layout 2011 года.

Современная версия очень отличается от предшествующих.

В поддержке браузерами IE:

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

grid-gap
		grid-template
		grid-template-areas
		grid-auto-columns
		grid-auto-rows
		grid-auto-flow
		grid-row-end
		grid-column-end
		grid-area
		grid-row-gap
		grid-column-gap
		grid-gap
		justify-self

Это не полный список всех изменений спецификации.

Имеет ли смысл использовать Grid Layout в IE вообще?

Если вы используете Grid, позиционируя элементы средствами CSS вместо использования автоматического размещения, то сетка в Internet Explorer 10, может оказаться очень полезной.

Пример базовой сетки Grid для IE

<div class="grid">
	  <div class="box item1">Item 1</div>
	  <div class="box item2">Item 2</div>
	  <div class="box item3">Item 3</div>
	  <div class="box item4">Item 4</div>
	</div>

.grid {
		display: -ms-grid;
		-ms-grid-columns: 1fr 1fr 1fr 1fr;
		-ms-grid-rows: 4fr;
	}
	. item1 {
		-ms-grid-column: 1;
		-ms-grid-row: 1;
	}
	.item2 {
		-ms-grid-column: 2;
		-ms-grid-row: 1;
	}
	.item3 {
		-ms-grid-column: 3;
		-ms-grid-row: 1;
	}
	.item4 {
		-ms-grid-column: 4;
		-ms-grid-row: 1;
	}

Выводы

CSS Grid открывает перед разработчиками мощные возможности, но полноценно реализовать их пока мешает недостаточная поддержка браузеров IE10 и 11 (поддерживаются частично свойства через вендорные префиксы).

Преимущества

CSS Grid сделает HTML более чистым (разметка проще, отсутствие множества классов и дополнительных тегов).
Простота макета страницы.
Гибкость и адаптация при работе с элементами.
Layout можно изменять, не затрагивая разметку.
Возможность построения блоков в двумерном пространстве (layout учитывает горизонтальное и вертикальное пространство одновременно).
Нет ограничений по элементам построения сетки макета.
Отлично подходит для создания больших макетов и управления ими.
Возможно создавать сайты с динамическим контентом.
Медиазапросы не требуются, чтобы адаптироваться к свободному пространству.

Недостатки

Частичная поддержка в браузерах IE10 и IE11.

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

И напоследок, эту статью я также опубликовал на английском в нашем блоге.

Читайте также: Обзор CSS Flexbox layout — технологии для расположения блоков на HTML-странице

Все про українське ІТ в телеграмі — підписуйтеся на канал редакції DOU

Теми: frontend, HTML, tech, Web

Что такое CSS Grid Layout?

CSS Grid Layout — это метод компоновки CSS, разработанный для двухмерного макета элементов на веб-странице или в приложении. Я работаю со спецификацией последние пять лет. На этом сайте постоянно растет коллекция примеров кода, видеоуроков и других ресурсов, которые помогут вам изучить спецификацию.

Chrome, Firefox и Safari добавили поддержку сетки в марте 2017 года. Edge добавил поддержку в октябре 2017 года. IE10, 11 и Edge 15 и более ранние версии поддерживают более старую спецификацию с префиксом. См. Могу ли я использовать, а также страницу браузеров на этом сайте, где подробно описано, где регистрировать ошибки, если вы их обнаружите.

Уровень 2 спецификации

Практически сразу после того, как сетка была запущена в производство, браузеры начали работать на уровне 2 спецификации. Он содержит функцию подсетки, перемещенную из уровня 1, чтобы разрешить поставку реализаций. Когда я пишу (январь 2019 г.), текущих реализаций функции подсетки нет. Вы можете прочитать о том, как это должно работать, в моем посте на Smashing Magazine — CSS Grid Level 2: Here Comes Subgrid.

Основные понятия

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

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

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

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

Сетка или Flexbox?

Один из наиболее частых вопросов, которые я получаю, когда говорю о Grid, касается того, является ли эта спецификация конкурирующей с Flexbox, и когда следует использовать ту или другую (при условии, что браузеры в равной степени поддерживают обе). Обычно я полагаюсь на это электронное письмо от Таба Аткинса из списка www-style.

Flexbox предназначен для одномерных макетов — всего, что необходимо выложенный по прямой линии (или по ломаной линии, что было бы единая прямая линия, если их снова соединить вместе). Сетка предназначена для двумерных макетов. Может использоваться как маломощный замена flexbox (мы пытаемся убедиться, что один столбец/строка grid очень похож на flexbox), но он не использует все свои возможности. власть.

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

Терминология сетки

Существует несколько терминов, введенных спецификацией макета сетки. Я объяснил их здесь, так как они облегчат следование примерам.

Линии сетки

Выделенная линия на этом изображении — это строка столбца 2.

Линии сетки — это линии, составляющие сетку. Они могут быть горизонтальными или вертикальными. Мы можем обращаться к ним по номеру или по имени.

Дорожка сетки

Выделенная дорожка сетки на этом изображении находится между строками 2 и 3.

Дорожка сетки — это пространство между двумя линиями сетки, горизонтальной или вертикальной.

Ячейка сетки

Выделенная ячейка сетки на этом изображении находится между строками 2 и 3 и линиями столбцов 2 и 3.

Ячейка сетки — это пространство между 4 линиями сетки. Таким образом, это наименьшая единица в нашей сетке, в которую мы можем поместить элемент. Концептуально это похоже на ячейку таблицы.

Область сетки

Выделенная область сетки на этом изображении находится между линиями строк 1 и 3 и линиями столбцов 2 и 4.

A Область сетки — это любая область сетки, ограниченная четырьмя линиями сетки. Он может содержать несколько ячеек сетки.

Сетка CSS | Темы масштабирования

Обзор

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

Что такое CSS Grid?

CSS Grid — это система двумерной компоновки, которая полностью меняет дизайн веб-страниц и делает его намного проще по сравнению с предыдущими системами, такими как float.

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

Сетка CSS содержит родительский элемент, обычно называемый контейнером сетки, и один или несколько дочерних элементов, называемых элементами сетки.

Здесь внешнее поле темно-синего цвета является родительским, а все элементы, такие как Меню, Заголовок, Главное и т. д., являются дочерними элементами.

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

При этом элемент .parent становится контейнером сетки, и каждый элемент, который является прямым дочерним элементом контейнера сетки (здесь .parent), становится элементом этой сетки или элементом сетки (здесь заголовок, нижний колонтитул, основной и т. д.) .

ПРИМЕР:

HTML

CSS

Этот код создаст

, контейнер сетки и элементы сетки

и .

Прямо сейчас вы можете не увидеть никакого эффекта свойства сетки, и это нормально.

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

Понятия и терминология CSS Grid.

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

Линии сетки

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

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

Дорожки сетки

Пространство между любыми двумя последовательными линиями сетки называется дорожкой сетки. Линии могут быть как вертикальными, так и горизонтальными.

Это в основном пространство или область между линиями.

На приведенном ниже изображении синим цветом обозначена дорожка сетки.

Ячейки сетки

Ячейки сетки — это пространство между любыми четырьмя пересекающимися линиями сетки. По аналогии с таблицей каждую ячейку таблицы также можно рассматривать как ячейку сетки.

Это наименьшая единица в сетке CSS.

Области сетки

Области сетки — это не что иное, как набор ячеек сетки, образующих прямоугольную область сетки.

Области сетки могут состоять из одной или нескольких ячеек.

Столбцы сетки

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

Столбцы в таблице можно считать столбцами сетки.

На изображении ниже серый, красный и синий блоки являются столбцами сетки.

Ряды сетки

Пространство между любыми двумя соседними горизонтальными линиями сетки называется строкой сетки.

Строки в таблице можно рассматривать как строки сетки.

На изображении ниже серый, красный и синий блоки представляют собой все строки сетки.

Желоба

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

Короче говоря, желоб — это пространство между любыми двумя соседними строками или столбцами.

CSS Grid Container

Как упоминалось ранее, элемент, к которому мы применяем display: grid; свойство — это в основном контейнер сетки. Но простое добавление свойства ничего не меняет, поэтому давайте углубимся в некоторые интересные вещи, которые помогут показать нам реальную силу сеток.

Создание столбцов

Во-первых, давайте обсудим, как мы можем создать несколько столбцов в нашей сетке. Для этого мы используем свойство CSS, известное как grid-template-columns.

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

Его можно использовать как —

Пример:

Вышеприведенный код создаст сетку с тремя столбцами, два из которых имеют размер 50px и один с автоматически установленным размером.

Мы можем поместить любое количество столбцов, а также использовать единицы измерения любого размера, такие как rem, em, % и т. д.

Создание строк

Для создания строк в сетках мы используем свойство CSS, известное как grid-template-rows.

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

Можно использовать как —

Пример:

Приведенный выше код создаст сетку с двумя рядами высотой 200 и 300 пикселей.

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

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

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

Может использоваться как —

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

Во-первых, элементы сетки именуются с помощью свойства grid-area.

Пример:

Затем, используя «области сетки-шаблона», мы создаем именованную сетку.

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

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

Может использоваться как —

Пример:

Здесь . означает, что эта область должна быть оставлена пустой.

Приведенный выше код создаст вывод, подобный этому изображению.

Функция повтора

Как вы, вероятно, заметили, указание каждого столбца вместе с его размером является утомительным процессом, особенно если у вас есть большое количество строк/столбцов одинакового размера.

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

Его можно использовать как —

Пример:

Это будет генерировать тот же вывод, что и запись 60px, четыре раза.

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

Элементы сетки CSS

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

Здесь оранжевые элементы являются элементами сетки.

Упорядочивание элементов

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

Можно использовать как —

Пример:

HTML

CSS

Это приведет к следующему результату.

Перекрывающиеся элементы сетки

При указании размера в grid-template-rows или grid-template-columns некоторые элементы, содержащие большое количество текста, могут переполняться.

Чтобы предотвратить это, мы можем использовать функцию min-max и указать размер родительского элемента. Он принимает два аргумента: минимальный размер и максимальный размер.

Может использоваться как

Пример:

Это создаст три строки с минимальным размером 200px200px200px и будет увеличиваться в соответствии с содержимым, как на изображении.

Абсолютно позиционированная CSS-сетка

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

Используется, когда вы хотите разместить элемент в сетке в фиксированном положении независимо от других элементов в сетке.

Пример:

Диаграмма, иллюстрирующая это, приведена ниже.

свойство grid-column

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

Его можно использовать как

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

Другие элементы, расположенные рядом с измененными элементами, изменятся соответствующим образом. Здесь они будут двигаться вправо.

Пример:

Это заставит .item1 начинаться со столбца 2 и продолжаться для двух столбцов или заканчиваться столбцом 4.

свойство grid-row

быть размещенным. Как и в grid-col, мы можем указать, в какой строке элемент будет начинаться и в какой строке он заканчивается.

Здесь элементы ниже измененного элемента будут перемещены в более низкие строки.

Может использоваться как

Пример:

Это заставит .item1 начинаться с строки 1 и продолжаться для двух столбцов.

свойство grid-area

свойство grid-area применяется к элементу сетки и используется для указания размера и местоположения элемента.

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

Четыре свойства: —

Начало строки сетки
Начало столбца сетки
Конец ряда сетки
Конец колонны сетки

Это сокращение для столбца сетки и строки сетки.

Пример:

Выравнивание сетки CSS

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

Сначала мы рассмотрим выравнивание элементов по вертикальной оси.

Выравнивание всех элементов по вертикальной оси

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

Существует множество значений, которые можно использовать с align-items для выравнивания элементов по вертикальной оси —

auto
обычный
начало
конец
центр
стрейч
базовый уровень
первая базовая линия
последний базовый уровень

Пример:

Здесь элемент . container содержит 4 элемента. Свойство start для align-items заставляет элементы начинаться с начала их конкретной строки сетки.

Выравнивание определенного элемента по вертикальной оси.

align-self применяется к определенному элементу и используется для его выравнивания относительно сетки по вертикальной оси.

Он также использует те же значения, что и в align-items для выравнивания элементов.

Пример:

Здесь к .item1 применено свойство stretch, которое растягивает элемент по оси Y, чтобы занять все доступное пространство. К элементу .item2 применяется свойство start, которое заставляет его начинаться с верхней части текущей строки сетки.

Выравнивание всех элементов по горизонтальной оси

Для одновременного выравнивания всех элементов сетки по горизонтальной оси мы можем использовать свойство justify-items, которое применяется к контейнеру сетки. Это используется для указания выравнивания элементов по сетке.

Можно использовать множество значений:

авто
обычный
начало
конец
центр
стрейч
базовый уровень
первая базовая линия
последний базовый уровень

Пример:

Здесь элемент .container содержит 9 элементов разного размера. Свойство start для justify-self заставляет элементы начинаться с начала линии сетки, предшествующей им.

Выравнивание определенного элемента по горизонтальной оси

Это свойство применяется к одному элементу, который требует другого горизонтального выравнивания относительно сетки. Он также использует те же значения, что и в align-self по горизонтальной оси.

Пример:

Здесь к .item1 применено свойство stretch, которое растягивает элемент по оси X, чтобы занять все доступное пространство.

К элементу .item2 применено свойство start, благодаря которому он начинается с начала текущего столбца сетки.

Инструмент «Инспектор CSS»

Инструмент «Инспектор CSS» — это превосходный инструмент, встроенный в Chrome и другие браузеры, который позволяет просматривать и изменять свойства, связанные с сеткой CSS, визуально или с помощью кода, без необходимости изменения самого файла CSS.

Чтобы получить к нему доступ, все, что вам нужно сделать, это —

Выберите значок меню и верхний правый угол браузера.
Затем выберите параметр Дополнительные инструменты.
Затем нажмите Инструменты разработчика.
Вы также можете использовать сочетание клавиш Ctrl+Shift+I.
Затем перейдите на вкладку «Элементы» вверху, и вы увидите все элементы на веб-странице.
Здесь вы можете перейти к родительскому элементу сетки, развернув элемент body и выбрав контейнер с примененной к нему сеткой.

Когда сетка доступна на странице, параметр «Макет» будет отображаться на панели CSS, которую можно использовать для просмотра и изменения элементов в сетке CSS.

Css grid что это: CSS Grid понятно для всех / Хабр

CSS Grid понятно для всех / Хабр

Что такое Grid?

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

Grid контейнер

Создаем шаблон сайта с CSS Grid:

Изменяем шаблон

Гриды с медиа запросами

Заключение

Обзор CSS Grid — технологии для упрощения разметки HTML-страниц

Что такое Grid. Основные термины

Различие Grid и Flexbox

Строки и расположение элементов

Размеры полос (треков)

Калькуляция в «fr»

Оси элементов в Grid

Ось column (столбца)

Ось row (строки)

Препроцессоры

Софт

Support

Имеет ли смысл использовать Grid Layout в IE вообще?

Пример базовой сетки Grid для IE

Выводы

Преимущества

Недостатки

Что такое CSS Grid Layout?

Уровень 2 спецификации

Основные понятия

Сетка или Flexbox?

Терминология сетки

Линии сетки

Дорожка сетки

Ячейка сетки

Область сетки

Сетка CSS | Темы масштабирования

Обзор

Что такое CSS Grid?

Понятия и терминология CSS Grid.

Линии сетки

Дорожки сетки

Ячейки сетки

Области сетки

Столбцы сетки

Ряды сетки

Желоба

CSS Grid Container

Создание столбцов

Создание строк

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

Функция повтора

Элементы сетки CSS

Упорядочивание элементов

Перекрывающиеся элементы сетки

Абсолютно позиционированная CSS-сетка

свойство grid-column

свойство grid-row

свойство grid-area

Выравнивание сетки CSS

Выравнивание всех элементов по вертикальной оси

Выравнивание определенного элемента по вертикальной оси.

Выравнивание всех элементов по горизонтальной оси

Выравнивание определенного элемента по горизонтальной оси

Инструмент «Инспектор CSS»

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