Grid

CSS модуль Grid был разработан CSS Working Group для создания сеток в разметке страниц и уже в феврале 2017 года, попал в Candidate Recommendation, а основные бразуеры начали его поддержку в марте 2017 года.

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

1. Чтобы ваш блок стал Grid нужно просто дать ему свойство css3: {display: grid;} или {display:inline-grid}, разница практически в автоматической ширине блока, в первом варианте блок растягиваются горизонтально, чтобы заполнить содержащий их блок, вовторм, блоки встроенного уровня уменьшаются, чтобы соответствовать их размеру внутренего содержания.

display: grid;

flex

display: inline-grid

inline-flex

Сетка ГРИД на пальцах:

Линия на Grid:

<div class="sect">
  <div style="background:#F08080;">50px</div>
  <div style="background:#98FB98;">auto</div>
  <div style="background:#FF8C00;">10%</div>
  <div style="background:#DDA0DD;">minmax(200px, max-content)</div>
  <div style="background:#B0E0E6;">minmax(150px, 270px)</div>
</div>
</body>

<style>
.sect {display: grid; 
grid-template-columns: 40px 50px auto 50px 40px;
grid-template-rows: 25% 100px auto;
grid-template: minmax(min-content, 200px)  min(50vw, 4000px); /
50px auto 10% minmax(200px, max-content) minmax(150px, 270px);
}
</style>

Шаблон на Grid:

/* SKELET */
.bodys {
width:70%; 
margin:0 auto;
display: grid; grid-gap: 10px; 
grid-template: 60px minmax(200px, max-content) 40px / 240px 1fr 300px;  grid-template-areas:
    "hed hed hed"
    "asdl mains asdr"
    "fot fot fot";
}
.headers {grid-area: hed;}
.asidel {grid-area: asdl;}
.asider {grid-area: asdr;}
.tilos {grid-area: mains;}
.footers {grid-area: fot;}

/* HTML */
<body>
<div class="ramka">
	<div class="bodys">
		<div class="headers">headers</div>
		<div class="asidel">asidel</div>
		<div class="tilos">tilos</div>
		<div class="asider">asider</div>
		<div class="footers">footers</div>
	</div>
</div>
</body>

Если нужно просто 4 колонки и 3 строки:


{
display:grid; 
grid-template-columns:repeat(4, 1fr);
grid-template-rows:repeat(3, 1fr); 
}

Что анимируется в гридах?

Согласно спецификации уровня 1 модуля CSS Grid Layout существует 5 анимируемых свойств сетки: grid-gap, grid-row-gap, grid-column-gap, grid-template-columns, grid-template-rows (анимируется высота и ширина а также расчет по функции calc)

псевдоэлементы контента (:: before и :: after) обрабатываются как элементы сетки!!!!

Отличный генератор сетки грид без grid-template

При отрицательных значениях (-1) отсчет идет с конца.!

3. !!! Grid можно смело применять - ~~с 2020 года.~~


Chrome	Edge	Firefox	Internet	Opera	Safari
57	16	52	Х	44	10.1


Android	Chrome	Edge	Firefox	Opera	Safari	Samsung
48	57	Yes	52	44	10.3	?

grid-column

~~Grid~~ ~~480~~ 0 27-05-2020, 02:42

CSS-свойство grid-column является сокращенным свойством для grid-column-start и grid-column-end, определяющим размер и расположение элемента сетки в столбце сетки путем добавления линии, промежутка или чего-либо (автоматически) для его размещения в сетке. тем самым, указав край inline-start и inline-end своей области сетки.

grid-row

~~Grid~~ ~~524~~ 0 27-05-2020, 00:32

CSS-свойство grid-row - это сокращенное свойство для grid-row-start и grid-row-end, определяющее размер и расположение элемента сетки в строке сетки путем добавления линии, промежутка или чего-либо (автоматически) для его размещения в сетке. тем самым, указав край inline-start и inline-end своей области сетки.

Явная и неявная сетка grid

~~Grid~~ ~~933~~ 0 26-05-2020, 04:43

Сетка CSS определяется с использованием значения сетки свойства display; Вы можете определить столбцы и строки в вашей сетке, используя свойства grid-template-row и grid-template-columns. Сетка, которую вы определяете с помощью этих свойств, описывается как явная сетка. Если вы размещаете контент за пределами этой явной сетки, или если вы

grid-column-end

~~Grid~~ ~~425~~ 0 26-05-2020, 04:24

Свойство CSS grid-column-end указывает конечную позицию элемента сетки в столбце сетки, добавляя линию, промежуток или ничего (автоматически) для его размещения в сетке, тем самым определяя край конца блока его области сетки.

grid-row-end

~~Grid~~ ~~457~~ 0 26-05-2020, 04:23

Свойство CSS grid-row-end задает конечную позицию элемента сетки в строке сетки, добавляя линию, промежуток или ничего (автоматически) к его размещению в сетке, тем самым определяя край конца строки его области сетки.

grid-column-start

~~Grid~~ ~~422~~ 0 26-05-2020, 04:19

Свойство CSS grid-column-start определяет начальную позицию элемента сетки в столбце сетки, добавляя линию, интервал или ничего (автоматически) для размещения в сетке. Эта начальная позиция определяет начальный край блока области сетки.

grid-row-start

~~Grid~~ ~~466~~ 0 26-05-2020, 04:14

Свойство CSS grid-row-start определяет начальную позицию элемента сетки в строке сетки, добавляя линию, промежуток или ничего (автоматически) к его расположению в сетке, указывая тем самым начальный край строки в области сетки.

grid-area

~~Grid~~ ~~520~~ 0 26-05-2020, 04:02

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

place-self

~~Grid~~ ~~484~~ 0 26-05-2020, 03:40

CSS-свойство place-self - это сокращенное свойство, устанавливающее свойства align-self и justify-self. Первое значение является значением свойства align-self, второе - значением justify-self. Если второе значение отсутствует, для него также используется первое значение.

align-self

~~Grid~~ ~~475~~ 0 26-05-2020, 03:36

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