Главная » 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: 70px / 50px auto 10% minmax(200px, max-content) minmax(150px, 270px);
}
</style>

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

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


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


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 8 0  

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

grid-row

Grid 9 0  

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

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

Grid 13 0  

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

grid-column-end

Grid 10 0  

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

grid-row-end

Grid 11 0  

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

grid-column-start

Grid 11 0  

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

grid-row-start

Grid 11 0  

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

grid-area

Grid 29 0  

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

place-self

Grid 11 0  

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

align-self

Grid 19 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