Полное руководство по css grid (grid шпаргалка)

Другие настройки

Комитет Госдумы поддержал законопроект об экстремистских материалах в соцсетях

CSS Properties

Css свойства text-decoration, vertical-align, text-align, text-indent для оформления текста в html

align-contentalign-itemsalign-selfallanimationanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-timing-functionbackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-sizeborderborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottombox-decoration-breakbox-shadowbox-sizingbreak-afterbreak-beforebreak-insidecaption-sidecaret-color@charsetclearclipclip-pathcolorcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnscontentcounter-incrementcounter-resetcursordirectiondisplayempty-cellsfilterflexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloatfont@font-facefont-familyfont-feature-settingsfont-kerningfont-sizefont-size-adjustfont-stretchfont-stylefont-variantfont-variant-capsfont-weightgridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-endgrid-column-gapgrid-column-startgrid-gapgrid-rowgrid-row-endgrid-row-gapgrid-row-startgrid-templategrid-template-areasgrid-template-columnsgrid-template-rowshanging-punctuationheighthyphens@importisolationjustify-content@keyframesleftletter-spacingline-heightlist-stylelist-style-imagelist-style-positionlist-style-typemarginmargin-bottommargin-leftmargin-rightmargin-topmax-heightmax-width@mediamin-heightmin-widthmix-blend-modeobject-fitobject-positionopacityorderoutlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflowoverflow-xoverflow-ypaddingpadding-bottompadding-leftpadding-rightpadding-toppage-break-afterpage-break-beforepage-break-insideperspectiveperspective-originpointer-eventspositionquotesresizerightscroll-behaviortab-sizetable-layouttext-aligntext-align-lasttext-decorationtext-decoration-colortext-decoration-linetext-decoration-styletext-indenttext-justifytext-overflowtext-shadowtext-transformtoptransformtransform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functionunicode-bidiuser-selectvertical-alignvisibilitywhite-spacewidthword-breakword-spacingword-wrapwriting-modez-index

CSS Reference

Css свойство overflow-y

CSS ReferenceCSS Browser SupportCSS SelectorsCSS FunctionsCSS Reference AuralCSS Web Safe FontsCSS Font FallbacksCSS AnimatableCSS UnitsCSS PX-EM ConverterCSS ColorsCSS Color ValuesCSS Default ValuesCSS Entities

CSS Properties

backface-visibility
background
background-attachment
background-blend-mode
background-clip
background-color
background-image
background-origin
background-position
background-repeat
background-size
border
border-bottom
border-bottom-color
border-bottom-left-radius
border-bottom-right-radius
border-bottom-style
border-bottom-width
border-collapse
border-color
border-image
border-image-outset
border-image-repeat
border-image-slice
border-image-source
border-image-width
border-left
border-left-color
border-left-style
border-left-width
border-radius
border-right
border-right-color
border-right-style
border-right-width
border-spacing
border-style
border-top
border-top-color
border-top-left-radius
border-top-right-radius
border-top-style
border-top-width
border-width
bottom
box-decoration-break
box-shadow
box-sizing
break-after
break-before
break-inside

caption-side
caret-color
@charset
clear
clip
clip-path
color
column-count
column-fill
column-gap
column-rule
column-rule-color
column-rule-style
column-rule-width
column-span
column-width
columns
content
counter-increment
counter-reset
cursor

direction
display
empty-cells
filter
flex
flex-basis
flex-direction
flex-flow
flex-grow
flex-shrink
flex-wrap
float
font
@font-face
font-family
font-feature-settings
font-kerning
font-size
font-size-adjust
font-stretch
font-style
font-variant
font-variant-caps
font-weight

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

hanging-punctuation
height
hyphens
@import
isolation
justify-content
@keyframes
left
letter-spacing

line-height
list-style
list-style-image
list-style-position
list-style-type

margin
margin-bottom
margin-left
margin-right
margin-top
max-height
max-width
@media
min-height
min-width
mix-blend-mode

object-fit
object-position
opacity
order
outline
outline-color
outline-offset
outline-style
outline-width
overflow
overflow-x
overflow-y

padding
padding-bottom
padding-left
padding-right
padding-top
page-break-after
page-break-before
page-break-inside
perspective
perspective-origin
pointer-events
position
quotes

resize
right

scroll-behavior

tab-size
table-layout
text-align
text-align-last
text-decoration
text-decoration-color
text-decoration-line
text-decoration-style
text-indent
text-justify
text-overflow
text-shadow
text-transform
top

transform
transform-origin
transform-style
transition
transition-delay
transition-duration
transition-property
transition-timing-function

unicode-bidi
user-select

vertical-align
visibility

white-space
width
word-break
word-spacing
word-wrap
writing-mode

z-index

Синтаксис:

CSS синтаксис:

grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end | itemname;;

// возможные значения
grid-column-start: "auto | line | line-name | span line | initial | inherit";
grid-column-end: "auto | line | line-name | span line | initial | inherit";
grid-row-start: "auto | line | line-name | span line | initial | inherit";
grid-row-end: "auto | line | line-name | span line | initial | inherit";
itemname: произвольное имя элемента // значение указывается без кавычек !!!

// с указанием одного значения
grid-area: grid-row-start;
grid-area: itemname;;

// с указанием двух значений
grid-area: grid-row-start / grid-column-start;

// с указанием трех значений
grid-area: grid-row-start / grid-column-start / grid-row-end;

// с указанием четырех значений
grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end;

/* используя ключевое слово auto */
grid-area: auto; 
grid-area: auto / auto; 
grid-area: auto / auto / auto;
grid-area: auto / auto / auto / auto; /* значение по умолчанию */

/* позиция элемента указывается в соответствии с начальной и конечной гранью элемента */
grid-area: 1;
grid-area: 1 / 5;
grid-area: 1 / 5 / 3;
grid-area: 1 / 5 / 3 / 7;

/* позиция элемента указывается в соответствии с заданным именем столбца */
grid-area: line-name;
grid-area: line-name / line-name;
grid-area: line-name / line-name / line-name;
grid-area: line-name / line-name / line-name / line-name;

/* используя ключевое слово span */
grid-area: span 2;
grid-area: 1 / span2;
grid-area: span 2 / 5;
grid-area: line-name / span2;
grid-area: 1 / 1 / span2;
grid-area: 2 / 2 / auto / span 3;
grid-area: 1 / 2 / span 3 / span 3;

Определение и применение

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

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

Схематичное отображение работы свойства grid-area отображено на следующем изображении:

Для позиционирования элемента в строках grid-контейнера вы можете воспользоваться свойствами:

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

Column IDs

Each column generated by the grid is given a unique Column ID, which is used in parts of the Grid API.

If you are using the API and the columns IDs are a little complex (e.g. if two columns have the same
, or if you are using instead of ) then it is useful to
understand how columns IDs are generated.

If the user provides in the column definition, then this is used, otherwise the
is used. If both and exist then gets preference. If neither
nor exists then a number is assigned. Finally, the ID is ensured to be unique by
appending if necessary, where is the first positive number that allows uniqueness.

In the example below, columns are set up to demonstrate the different ways IDs are generated.
Open the example in a new tab and observe the output in the dev console. Note the following:

Col 1 and Col 2 both use . The grid appends to Col 2 to make the ID unique.
Col 3 and Col 4 both use . The grid appends to Col 4 to make the ID unique.
Col 5 and Col 6 have neither or so the grid generates column IDs.

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

Значение	Описание
none	Значение по умолчанию. Нет конкретных размеров столбцов или строк
grid-template rows / grid-template-columns	Specifies the size(s) of the columns and rows
grid-template-areas	Specifies the grid layout using named items
grid-template rows / grid-auto-columns	Задает размер (высоту) строк и автоматический размер столбцов
grid-auto-rows / grid-template-columns	Задает автоматический размер строк и задает свойство столбцов сетки-шаблона
grid-template rows / grid-auto-flow grid-auto-columns	Задает размер (высоту) строк и порядок размещения автоматически размещаемых элементов, а также автоматический размер столбцов
grid-auto flow grid-auto-rows / grid-template-columns	Задает способ размещения автоматически размещаемых элементов и автоматического размера строк, а также задает свойство столбцов сетки-шаблона
initial	Присваивает этому свойству значение по умолчанию. Читайте о initial
inherit	Наследует это свойство из родительского элемента. Read about inherit

Автоматизируем всё, что можно

Под конец я хочу продемонстрировать еще пару понятий на примерах. Я хочу воспроизвести эту сетку товаров с сайта Aldo. Вот что здесь надо отметить:

На больших экранах () это сетка 4х5
В ней размещены 13 элементов
Некоторые элементы занимают по 2 колонки и/или 2 ряда
У всех картинок пропорции
Между ячейками интервал в , а по периметру грида отступ тоже в
Максимальная ширина грида ограничена до

See the Pen Aldo Style Product Grid (CSS Grid) by Varun Vachhar (@winkerVSbecks) on CodePen.

Грид также меняется в определенных контрольных точках. На средних устройствах (от до ) он сокращается до 3 колонок, а на маленьких устройствах () — до двух. Наконец, нам нужно сохранять пропорцию между размерами рядов и колонок.

Большие экраны
min-width: 60em
(4 колонки)

+-----------+ +-----------+
|  шир. 2   | |           |
|           | |           |
+-----------+ |   шир. 2  |
+----+ +----+ |   выс. 2  |
|    | |    | |           |
|    | |    | |           |
+----+ +----+ +-----------+
+----+ +----+ +----+ +----+
|    | |    | |    | |    |
|    | |    | |    | |    |
+----+ +----+ +----+ +----+
+-----------+ +----+ +----+
|           | |    | |    |
|           | |    | |    |
|  шир. 2   | +----+ +----+
|  выс. 2   | +----+ +----+
|           | |    | |    |
|           | |    | |    |
+-----------+ +----+ +----+

|<----max-width: 60em---->|

Средние экраны
min-width: 30em
and max-width: 60em
(3 колонки)

+------------------+
|      шир. 3      |
|                  |
+------------------+
+-----------+ +----+
|           | |    |
|           | |    |
|  шир. 2   | +----+
|  выс. 2   | +----+
|           | |    |
|           | |    |
+-----------+ +----+
+----+ +----+ +----+
|    | |    | |    |
|    | |    | |    |
+----+ +----+ +----+
+-----------+ +----+
|           | |    |
|           | |    |
|  шир. 2   | +----+
|  выс. 2   | +----+
|           | |    |
|           | |    |
+-----------+ +----+
+----+ +----+ +----+
|    | |    | |    |
|    | |    | |    |
+----+ +----+ +----+
Маленькие экраны
  min-width: 60em
(2 колонки)

+-----------+
|  шир. 2   |
|           |
+-----------+
+-----------+
|           |
|           |
|  шир. 2   |
|  выс. 2   |
|           |
|           |
+-----------+
+----+ +----+
|    | |    |
|    | |    |
+----+ +----+
+----+ +----+
|    | |    |
|    | |    |
+----+ +----+
+----+ +----+
|    | |    |
|    | |    |
+----+ +----+
+-----------+
|           |
|           |
|  шир. 2   |
|  выс. 2   |
|           |
|           |
+-----------+
+----+ +----+
|    | |    |
|    | |    |
+----+ +----+
+----+ +----+
|    | |    |
|    | |    |
+----+ +----+

Грид с товарами в стиле Aldo. 2 колонки на маленьких устройствах, 3 на средних и 4 — на больших.

Размещение грид-элементов

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

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

                      .my-grid

                      1     2      3      4     5
                      +----+-+----+-+----+-+----+ 1
                      |    | |    | |    | |    |
                      |    | |    | |    | |    |
                      |    | |    | |    | |    |
   grid-row-start (2)-------------> o-----------o <-----(5) grid-column-end
grid-column-start (3) |    | |    | |xxxxxxxxxxx|
                      |    | |    | |xxxxxxxxxxx|
                      |    | |    | |xxxxxxxxxxx|
                      +----+ +----+ |xxxxxxxxxxx|
                      |    | |    | |xxxxxxxxxxx|
                      |    | |    | |xxxxxxxxxxx|
                      |    | |    | |xxxxxxxxxxx|
grid-row-end (4)------------------> o-----------o 4
                      |    | |    | |    | |    |
                      |    | |    | |    | |    |
                      |    | |    | |    | |    |
                      +----+ +----+ +----+ +----+ 5
                      |    | |    | |    | |    |
                      |    | |    | |    | |    |
                      |    | |    | |    | |    |
                      +----+-+----+-+----+-+----+ 6

Можно разместить элемент в гриде с помощью , и , .

Грид-линии автоматически пронумерованы. Начиная с для крайней верхней и крайней левой линий. Эти номера мы используем при объявлении и . Можно считать и с конца. Для этого начинаем с для крайней правой и крайней нижней линий. Наконец, можно указывать линии с помощью того, сколько полос должен занять элемент. Например, : означает, что номер конечной линии — начальная грид-линия + 3 полосы.

Внизу — пример на CodePen, показывающий несколько разных стилей размещения

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

See the Pen CSS Grid Positioning by Varun Vachhar (@winkerVSbecks) on CodePen.

Значения¶

Значение по-умолчанию:

Применяется к grid-контейнерам

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

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

Неотрицательное значение в «гибких» единицах измерения (fractional unit). Каждый столбец занимает часть оставшегося пространства в контейнере сетки макета пропорционально заданному коэффициенту. Например, при использовании значения , столбцы будут занимать ⅓ и ⅔ оставшегося пространства, соответственно. Общий размер таких строк или столбцов вычитается из доступного пространства, что дает оставшееся пространство, которое затем делится между строками и столбцами гибкого размера пропорционально их коэффициенту.

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

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

Ключевое слово, которое задает размер каждого столбца в зависимости от самого большого элемента в столбце.

Ключевое слово, которое задает размер каждого столбца в зависимости от самого маленького элемента в столбце.

Функциональная нотация, определяющая диапазон размеров больше или равный и меньше или равный . Если меньше , то игнорируется, а функция обрабатывается как . Значение в «гибких» единицах измерения в качестве максимального значения задает коэффициент гибкости столбца, это недопустимо для определения минимума.

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

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

Представляет из себя повторяющийся фрагмент списка столбцов (дорожек), позволяя записать в более компактной форме большое количество столбцов с повторяющимся шаблоном. Возможные значения:

Устанавливает свойство в значение по умолчанию.

Указывает, что значение наследуется от родительского элемента.

Гибкие гриды

Можно определить и грид с гибкими размерами полос. Или даже с фиксированными и гибкими полосами одновременно! (См. пример ниже.) Значения в процентах тут относятся к процентам от грид-контейнера.

.my-weird-but-flexible-grid {
  display: grid;
  grid-template-columns: 20px 5% 80px 40%;
  grid-template-rows: 4rem 2vh 12% 80px 20em;
}

.my-weird-but-flexible-grid

+-+--+----+----------------------+
| |  |    |                 |    |
+-+--+----+-----------------+    |
+-+--+----+-----------------+    |
| |  |    |                 |    |
| |  |    |                 |    |
+-+--+----+-----------------+    |
| |  |    |                 |    |
+-+--+----+-----------------+    |
| |  |    |                 |    |
| |  |    |                 |    |
| |  |    |                 |    |
| |  |    |                 |    |
| |  |    |                 |    |
+-+--+----+-----------------+    |
|                                |
|                                |
|                                |
|                                |
|                                |
+--------------------------------+

Гибкий грид, где мы намешали разных единиц для размеров полос — пиксели, проценты, единицы вьюпорта и em-ы.

CSS Tutorial

CSS HOMECSS IntroductionCSS SyntaxCSS SelectorsCSS How ToCSS CommentsCSS Colors
Colors
RGB
HEX
HSL

CSS Backgrounds
Background Color
Background Image
Background Repeat
Background Attachment
Background Shorthand

CSS Borders
Borders
Border Width
Border Color
Border Sides
Border Shorthand
Rounded Borders

CSS Margins
Margins
Margin Collapse

CSS PaddingCSS Height/WidthCSS Box ModelCSS Outline
Outline
Outline Width
Outline Color
Outline Shorthand
Outline Offset

CSS Text
Text Color
Text Alignment
Text Decoration
Text Transformation
Text Spacing
Text Shadow

CSS Fonts
Font Family
Font Web Safe
Font Style
Font Size
Font Google
Font Shorthand

CSS IconsCSS LinksCSS ListsCSS Tables
Table Borders
Table Size
Table Alignment
Table Style
Table Responsive

CSS DisplayCSS Max-widthCSS PositionCSS OverflowCSS Float
Float
Clear
Float Examples

CSS Inline-blockCSS AlignCSS CombinatorsCSS Pseudo-classCSS Pseudo-elementCSS OpacityCSS Navigation Bar
Navbar
Vertical Navbar
Horizontal Navbar

CSS DropdownsCSS Image GalleryCSS Image SpritesCSS Attr SelectorsCSS FormsCSS CountersCSS Website LayoutCSS UnitsCSS Specificity

Свойства для элементов CSS Grid

grid-column, grid-row

Выше приведенный пример показывает четко, как работают набор свойств grid-column и grid-row. Сами свойства работают достаточно интересно, ведь обозначаем мы не сами клетки которые мы хотим зацепить, а линии с которых хотим начать и закончить выдиление.

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

.item {
  grid-row-start: 1; //начинаем с первой строки
  grid-column-start: 1; // так же начинаем с первой колонки
  grid-column-end: 4;  // выделяем четвертую колонку
}
// оно же
.item {
    grid-row: 1; //начинаем с первой строки
    grid-column: 1 / 4; // выбираем все колонки с 1 по 4
}

Что из этого получается? А получается следующая картина:

Надеюсь так понятнее. То есть выделяем мы не сами ячейки. Выделение начинается с линии, а дальше мы указываем до куда.

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

Значения могут быть следующими:

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

grid-area

Что мне очень нравится, в CSS Grid можно давать элементам имена, а после уже использовать шаблон, с помощью которого можно делать такую расстановку, которую тебе вздумается. Я достаточно популярно попытался раскрыть эту тему в статьи о Grid template layout. Но это не значит, что я не буду приводить здесь примеров.

Как по мне, пример очень даже получился крутой. И очень даже наглядный. Самые внимательные могу заметить, что мы можем перемещать и устанавливать блоки так как угодно, причем структура html вообще не меняется. Очень полезная возможность при создании каркасов сайта, либо блоков, которые должны отличаться при отображении на мобильной либо десктопной версии.

Получается следующий код:

// сначала задаем имена элементам
.header{
  grid-area: header;
  background-color: green;
}
.content{
  grid-area: content;
  background-color: green;
  height: 200px;
}
.sidebar{
  grid-area: sidebar;
  background-color: green;
   height: 100px;
}
.footer{
  grid-area: footer;
  background-color: green;
}

// после обозначаем как оно будет выглядеть в grid таблице
.grid {
  display: grid;
  color: white;
  grid-template: "header header header" auto
                 "content content sidebar" auto
                 "content content ." auto
                 "footer footer footer" auto 
                 / auto;
 grid-gap: 5px;
}

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

Так же у gria-area хочу отметить следующий синтаксис:

grid-area: имя области;
grid-area: row-start / column-start / row-end / column-end;

имя области — название области сетки.
row-start / column-start / row-end / column-end — может быть числом или именем линии.

justify-self, align-self, place-self

Практически всегда создать таблицу и сделать расстановку в таблице бывает недостаточно. Ведь часто возникает задача прижать содержимое в какой-то части, а все максимальной отзывчивости и адаптивности.

Вот здесь нам помогут три свойства:

align-self;
justify-self;
place-self;

В этом примере я попытался максимально показать как работают эти три свойства, да так что больше знать и не нужно:

Значение может быть:

auto (default) — указывает использовать значение , которое задается для контейнера. Если элемент позиционирован через , то применяется .
stretch — растягивает все элементы на всю ширину/высоту ячеек.
start — размещает все элементы в начале ячеек (слева или сверху).
end — размещает все элементы в конце ячеек (справа или внизу).
center — размещает все элементы по центру ячеек.

Так же имеет редкие значения:

safe значение — если ширина или высота элемента превышает размер ячейки, то значение переключается на . В значении тут может быть только: или .
unsafe значение — значение остается указанным, даже если ширина или высота элемента превышает размер ячейки. В значении тут может быть только: или .

Заключение

Задумайтесь на миг об открывшихся возможностях. Подумайте о сколь угодно безумных раскладках, которые мы теперь можем построить. Не приходит на ум ни одна? Не беда. Заскочите в лабораторию раскладок Джен Симмонс за кое-какими идеями. CSS Grid Layout наверняка здорово повлияет на веб-дизайн. Множество макетов, от которых вы отказывались, потому что их нельзя было реализовать на CSS, запросто могут оказаться возможны благодаря CSS-гридам.

Что дальше? Вы знали, что грид-линии можно именовать? Вы знали, что можно выравнивать элементы в полосах с помощью свойств and ? А что можно указывать размеры в виде диапазонов «от и до» с помощью ? Еще столько всего предстоит открыть! Я знаю, это может показаться слишком необъятным. Продвигайтесь понемногу. Верстайте. Экспериментируйте. Нельзя мгновенно понять сразу всё, это нормально.

Заключение

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

Однако компания Microsoft снова разочаровала: на данный момент в браузерах IE и Edge присутствует только частичная поддержка Grid через префикс . Сейчас в Microsoft отправлена заявка на развитие поддержки Grid, и она находится в топе по количеству заявителей.

Frontend Developer

UX Feedback, Удалённо, От 60 000 до 120 000 ₽

tproger.ru

Вакансии на tproger.ru

Несмотря на то, что большинство браузеров поддерживает Grid, он работает только в последних версиях этих браузеров (а в некоторых только частично), что составляет только 30–40 % от общего числа используемых браузеров. Если вы не уверены, что подавляющее большинство ваших пользователей имеет последние сборки браузеров с поддержкой Grid, то желательно не экспериментировать с созданием крупномасштабных проектов.