Выбор css макета

Summary

That’s the lowdown on using the and properties to create layouts. If you haven’t used this layout method before, give it a try. I find that it is a lovely way to experiment with layouts and often use it when prototyping a layout — even if for one reason or another we will ultimately use a different method for the production version.

Overflow And Data Loss In CSS

CSS is designed to keep your content readable. Let’s explore situations in which you might encounter overflow in your web designs and how CSS has evolved to create better ways to manage and design around unknown amounts of content. Read a related article →

(il)

Явный и неявный Grid

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

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

Когда количество grid-элементов превысит количество явно определенных ячеек, оставшиеся элементы cформируют неявный Grid.

Теперь у нас есть три строки. Заметьте, что высота третьей строки задается только содержимым и отступом. Она является частью сетки, поскольку данные элементы являются дочерними к grid-контейнеру. Но строка неявно определена с помощью . Вместо этого мы получили явный grid с дополнительными элементами, количество которых превышает определенное количество явно заданных ячеек.

Размер элементов неявного Grid по умолчанию устанавливается как . Элементы сетки будут расширяться, чтобы разместить свое содержимое. Если мы установим контейнера в 50, то высота трека явного Grid расшириться до 30.

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

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

Высота строк неявного Grid будет равномерна.

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

Vue Grid Generator by Masaya Kazama

Vue Grid Generator has a couple of handy preset layouts, the Holy Grail and the Article List, that you can easily customize by adding and removing elements and adjusting sizes. This is the reason why, instead of confining myself to the CSS Grid code for the cards container, I approximated the entire layout simply by customizing the preset Article List layout.

This tool lets you build your CSS Grid using the and related properties. Also, you need media queries to make the page responsive and you can only set the property manually.

Here’s what the default layout looked like after I copied and pasted the generated code into a new Pen and set the selector’s height to :

Below is the final result, after a few CSS and HTML adjustments to approximate the look and feel of the original demo:

See the Pen
CSS Grid Generator #4 by Masaya Kazama by Maria Antonietta Perna (@antonietta)
on CodePen.

Создание Grid-контейнера

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

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

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

На примере ниже имеется два блочных элемента плюс строка с тегом в середине текста. Мы получаем пять grid-элементов:

• Два элемента
• Строка текста перед
• Элемент тега
• Строка текста после

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

Также можно создать строчную сетку, задав ; в этом случае ваш grid-контейнер станет строчным блоком. Однако, его дети всё ещё будут элементами сетки и будут вести себя так же, как элементы внутри блочного grid-контейнера. Свойство определяет лишь внешний контекст форматирования для сетки. Именно поэтому grid-контейнер в данном случае ведёт себя точно так же, как указано выше, даже если находится рядом с другими блоками страницы.

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

The Order of the Items

The Grid Layout allows us to position the items anywhere we like.

The first item in the HTML code does not have to appear as the first item in the grid.

Example

.item1 { grid-area: 1 / 3 / 2 / 4; }.item2 { grid-area: 2 / 3 / 3 / 4; }
.item3 { grid-area: 1 / 1 / 2 / 2; }.item4 { grid-area: 1 / 2 / 2 / 3; }
.item5 { grid-area: 2 / 1 / 3 / 2; }.item6 { grid-area: 2 / 2 / 3 / 3; }

You can re-arrange the order for certain screen sizes, by using media queries:

Example

@media only screen and (max-width: 500px) {  .item1 { grid-area: 1 /
span 3 / 2 / 4; }  .item2 { grid-area: 3 / 3 / 4 / 4; } 
.item3 { grid-area: 2 / 1 / 3 / 2; }  .item4 { grid-area: 2 / 2 /
span 2 / 3; }  .item5 { grid-area: 3 / 1 / 4 / 2; }  .item6
{ grid-area: 2 / 3 / 3 / 4; }}

❮ Previous
Next ❯

LayoutIt by Leniolabs

LayoutIt is quite intuitive and has a few more features than CSS Grid Generator. For example, it lets you set the property in , and units, and set and using . However, this is not enough to ensure responsiveness, so you’ll still need to adjust your values using media queries.

Also, I found no way of setting the property, so you’ll have to do it manually if you’d like some white space in between rows and columns.

Here’s the result as I entered the generated code into my original example:

See the Pen
CSS Grid Generator #2 by Leniolabs by Maria Antonietta Perna (@antonietta)
on CodePen.

Below is what the relevant code looks like:

Смешивание автоматического и «линейного» позиционирования

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

Поведение по умолчанию всегда предусматривает продвижение вперёд, оставляя ячейку свободной, если элемент не помещается на сетке. Вы можете менять это поведение с помощью свойства со значением . В этом случае, если присутствует элемент, который равен оставшемуся в сетке свободному месту, он будет помещён туда вне очереди, чтобы заполнить свободное пространство. В приведённом ниже примере используется «плотное» размещение, элемент 3 теперь размещается перед элементом 2.

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

Сначала будут размещены «вручную» спозиционированные элементы, а остальные будут последовательно занимать оставшееся свободное место

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

Чтобы продемонстрировать это, я разместила элементы 1 и 2 с помощью линий сетки, оставив верхний ряд пустым. Последующие элементы оказались вверху, чтобы заполнить свободное пространство.

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

CSS Advanced

CSS Rounded CornersCSS Border ImagesCSS BackgroundsCSS ColorsCSS Color KeywordsCSS Gradients
Linear Gradients
Radial Gradients

CSS Shadows
Shadow Effects
Box Shadow

CSS Text EffectsCSS Web FontsCSS 2D TransformsCSS 3D TransformsCSS TransitionsCSS AnimationsCSS TooltipsCSS Style ImagesCSS Image ReflectionCSS object-fitCSS object-positionCSS ButtonsCSS PaginationCSS Multiple ColumnsCSS User InterfaceCSS Variables
The var() Function
Overriding Variables
Variables and JavaScript
Variables in Media Queries

CSS Box SizingCSS Media QueriesCSS MQ ExamplesCSS Flexbox
CSS Flexbox
CSS Flex Container
CSS Flex Items
CSS Flex Responsive

Объяснение свойств ‘grid-template-areas’ и ‘grid-area’

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

Примечание: если вы прочтёте предыдущую статью из данной серии «Понимание CSS Grid (2 часть): Grid-Линии», то узнаете, что с помощью сокращённого свойства можно задать все четыре линии в одном свойстве.

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

Свойство интересно тем, что может принимать как номера линий, так и их имена.

Использование с номерами линий

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

Если же в данном свойстве вы пропускаете какие-то номера, они принимают значение , что значит, что область будет занимать один трек (что является поведением по умолчанию). Таким образом, следующий CSS задаст элементу свойство , а значения остальных свойств позиционирования установит на . Следовательно, элемент будет автоматически размещён на 3 строковой линии, в первом доступном колоночном треке, и будет занимать один строковый трек и один колоночный трек.

Использование с именами линий

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

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

Ниже я создала сетку с именованными линиями и использовала для размещения элемента (опустив последнее значение):

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

То же самое происходит, если опустить третье значение свойства . Оно принимает то же значение, что и и следовательно, становится .

Посмотрите на следующий CodePen-пример, демонстрирующий, как разное количество значений для свойства влияет на размещение элемента:

Это объясняет, почему свойство работает с единственным значением, представляющим название области.

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

Если имя области назначается свойству стартовой линии , то это означает начальную точку колонки или строки. Если же имя области назначается свойству конечной строки , – это соответственно означает конец колонки или строки.

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

Наложение элементов при использовании

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

В приведённом ниже CodePen-примере я добавила дополнительный элемент и расположила его над другими элементами сетки, указывая grid-линии.

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

Следовательно, grid-область, именуемая , имеет начальную линию, именуемую и конечную линию, именуемую .

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

Свойства grid-template-rows и grid-template-columns

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

Значения:

• <длина-пути> — может быть указана в единицах измерения длины CSS, в процентах или же в виде доли свободного места в сетке (с использованием единицы (англ. fraction));
• <имя-линии> — произвольное имя на ваше усмотрение, заключенное в квадратные скобки.

Схема:

.grid-container {
    grid-template-rows: <длина-пути> ...
                        или <имя-линии> <длина-пути> ...;
    grid-template-columns: <длина-пути> ...
                           или <имя-линии> <длина-пути> ...;
}

Пример 1

Если вы не указываете имена grid-линий между значениями grid-путей, то grid-линиям автоматически присваиваются числовые имена (1, 2, 3 и т. д.):

.grid-container {
    grid-template-rows: 50px auto 150px;
    grid-template-columns: 50px 100px auto 100px 50px;
}

Пример 2

Вы можете явно указать имена grid-линий:

.grid-container {
    grid-template-rows:  50px  auto  150px ;
    grid-template-columns:  50px  100px  auto
                            100px  50px ;
}

Пример 3

Grid-линия может иметь несколько имен одновременно! В примере ниже третьей grid-линии будет присвоено два имени — и :

.grid-container {
    grid-template-columns:  50%  50% ;
}

Пример 4

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

.grid-container {
    grid-template-columns: 40px  40px  40px  10%;
}

/* код выше эквивалентен коду ниже */

.grid-container {
    grid-template-columns: repeat(3, 40px ) 10%;
}

Пример 5

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

.grid-container {
    grid-template-columns: 1fr 1fr 1fr;
}

Пример 6

Вычисление свободного пространства происходит только после применения фиксированных значений. В примере ниже общий объем свободного пространства, доступного для значений , не включает в себя 70 пикселей:

.grid-container {
    grid-template-columns: 1fr 70px 1fr 1fr;
}

CSS Grid Generator by Sarah Drasner

CSS Grid Generator is a shiny new generator coded by Sarah Drasner. The interface is super sleek and you can put together a basic CSS Grid layout in no time.

I generated a 2-column grid and dumped the code in my original example. You need media queries to make the layout responsive. Here’s the result:

See the Pen
CSS Grid Generator #1 by Sarah Drasner by Maria Antonietta Perna (@antonietta)
on CodePen.

The code looks like this:

This tool lets you:

• set the numbers and units of rows and columns
• drag within the boxes to place divs within them

At the time of writing, Sarah’s CSS Grid generator lets you create simple implementations of CSS Grid-based layouts. This is clearly stated by the author:

However, since this is a brand new open-source tool, it’s still in active development and the community is invited to contribute. Complex features like are not implemented yet, but they might find their way into it at a later time.

Свойство grid-template-columns

Теперь добавим колонки.

Ширину мы можем указывать в любых CSS единицах длины, в процентах и в единицах fr.

fr (от fraction — часть) это новая форма единицы измерения созданная для гридов, которая позволяет добавлять столько колонок, сколько мы захотим, не заботясь о конкретном значении ширины колонки. Свободное место распределяется между такими колонками пропорционально количеству fr.

— такая запись означает, что мы создаем 3 колонки одинаковой ширины.

Немного математики:

Ширина грида равна 400px. Если мы зададим для следующие значения: , то ширина всех колонок будет равна 1.5fr + 2fr + 1fr= 4.5fr.

Теперь вычислим ширину каждой колонки. Первая колонка будет иметь ширину 1.5fr / 4.5fr * 400px. Что в итоге равно 133px. Соответственно рассчитаем остальные значения.

Вторая колонка 2fr / 4.5fr * 400px = 178px, третья колонка 1fr / 4.5fr * 400px = 89px. Т.е. мы могли задать колонки таким образом:

В сумме общая ширина равна 400px.

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

Повторяющиеся строки и столбцы

Иногда нужна сетка из столбцов и строк, которые повторяются автоматически. Для этого можно использовать функцию repeat():

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

Функция repeat() принимает два аргумента:

• Сколько раз повторять список трека.
• Список трека для повторения.

Первый аргумент может быть выражен положительным целым числом или ключевыми словами  или . Приведенный выше CSS-код создает следующий Grid:

Повторяющийся Grid с единицами измерения .

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

Повторяющийся шаблон Grid из двух столбцов.

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

Значение	Описание
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

Основные термины 🔗

• грид-контейнер: родительский элемент, к которому применяется свойство .
• грид-элемент: дочерний элемент, прямой потомок грид-контейнера. Подчиняется правилам раскладки гридов.
• грид-линия: разделительная линия, формирующая структуру грида. Может быть как вертикальной (грид-линия колонки), так и горизонтальной (грид-линия ряда). Располагается по обе стороны от колонки / ряда. Используется для привязки грид-элементов.

Синяя линия — грид-линия колонки

грид-ячейка: пространство между двумя соседними грид-линиями колонок и рядов. Одна единица грид-сетки.

Грид-ячейка между 1 и 2 грид-линиями ряда и 2 и 3 грид-линиями колонки

грид-полоса: пространство между двумя соседними грид-линиями. Может быть проще думать о грид-полосе как о ряде или колонке.

Горизонтальная грид-полоса между 1 и 2 грид-линиями ряда

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

Грид-область между 1 и 3 грид-линиями ряда и 1 и 2 грид-линиями колонки.

CSS Properties

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-sizingcaption-sidecaret-color@charsetclearclipcolorcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnscontentcounter-incrementcounter-resetcursordirectiondisplayempty-cellsfilterflexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloatfont@font-facefont-familyfont-kerningfont-sizefont-size-adjustfont-stretchfont-stylefont-variantfont-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-widthobject-fitopacityorderoutlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflowoverflow-xoverflow-ypaddingpadding-bottompadding-leftpadding-rightpadding-toppage-break-afterpage-break-beforepage-break-insideperspectiveperspective-originpointer-eventspositionquotesresizerighttab-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-wrapz-index

Свойства дочерних элементов

grid-column-start / grid-column-end / grid-row-start / grid-row-end

Определяет местоположение элемента в сетке, ссылаясь на конкретные линии сетки. 

• grid-column-start / grid-row-start — позиция, в которой начинается элемент;
• grid-column-end / grid-row-end —  позиция, в которой заканчивается элемент.

Значения: 

• <line> — может быть числом, которое ссылается на номер линии, или именем линии сетки;
• span <number> — элемент будет охватывать необходимое количество линий сетки;
• span <name> — элемент будет охватывать сетку до тех пор, пока не достигнет линии с указанным именем;
• auto — автоматическое размещение и диапазон элемента, или диапазон по умолчанию.

Тонкости и примеры

Если не указаны значения grid-column-end / grid-row-end, то элемент, по умолчанию, считается равным 1 ячейке.

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

grid-column / grid-row

Сокращенная запись для grid-column-start + grid-column-end и grid-row-start + grid-row-end, соответственно.

/ — допускаются те же значения что и в полной записи, включая значение span.

grid-area

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

• <name> — любое имя;
• <row-start> / <column-start> / <row-end> / <column-end> — может быть номером или именем линии.

justify-self

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

По умолчанию: stretch 

• start — элемент у начального края ячейки.
• end — элемент у конечного края ячейки.
• center — элемент по центру ячейки.
• stretch — заполняет всю ширину ячейки.

align-self

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

По умолчанию: stretch 

• start — элемент у начального края ячейки.
• end — элемент у конечного края ячейки.
• center — элемент по центру ячейки.
• stretch — заполняет всю длину ячейки.

place-self

Объединяет свойства align-self и justify-self.

• auto — значение «по умолчанию», зависящее от параметров верстки.
• <align-self> / <justify-self> — первое значение устанавливает параметр align-self, второе justify-self. Если второе значение пропущено, первое распространяется на оба параметра.