Главная » CSS3 » Grid

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:


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:


Шаблон на 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>

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

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


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

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


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


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

 
 Chrome Edge Firefox Internet Opera Safari
571652Х4410.1
 
 Android Chrome Edge Firefox Opera Safari Samsung
4857Yes524410.3?

grid-column

Grid 191 0  

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

grid-row

Grid 205 0  

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

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

Grid 211 0  

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

grid-column-end

Grid 159 0  

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

grid-row-end

Grid 168 0  

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

grid-column-start

Grid 158 0  

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

grid-row-start

Grid 189 0  

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

grid-area

Grid 193 0  

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

place-self

Grid 158 0  

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

align-self

Grid 187 0  

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

Опыт в веб разработке:

2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
1979
2020