CSS

flex
Grid

flex


display: flex;
flex-direction: column; // Сменить ось на вертикальную
// row / column

порядок: 
order: 3; // С самым большим уходит в конец, по умолч 1
100vh // Высота экрана
.item {
	height:fit-content;// По содержимому
}

justify-content: space-between;
align-items: center;
flex-wrap: wrap; // Если не помешается, то перенос

//это для одного элемента 
align-self: center; 
flex-basis: 10%; Растяжка относительно всей области
flex-shrink: 2; Скорость сжатия, если мало места
flex-grow: 2; Сколько ячеек подобных занимает эта ячейка

flex: 0 0 40%;
flex: flex-grow flex-shrink flex-basis;

Grid

Видео


box-sizing: border-box;

display:grid;
grid-template: 1fr 1fr / 1fr 1fr; 
grid-gap:10px;
justify-content: space-between;
align-items: center;

// Строки / колонки
grid-template-columns: 1fr 2fr;
grid-template-columns: repeat(10, 1fr);
grid-template-columns: repeat(10, 1fr 2fr);
grid-template-rows: 100px 200px;

// Отступы меж колонками
grid-gap:10px; // Сразу
grid-column-gap: 10px; 
grid-row-gap: 10px;

grid-auto-rows: 100px; // Задаёт размеры тем, кому не даны размеры
grid-auto-rows: minmax(100px, auto);

// Выравнивание
justify-content: end;
align-content: center;


// Расположение
grid-column-start: 1; // С какой колонки начинается
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 3;
или
grid-column:1/3;
grid-row:1/3;
align-self: center;
text-align: center;


grid-template-areas:
'header header'
'sitebar content';

.header {
	grid-area: header;
}



    text-align: right;
    vertical-align: middle;

Для детей
align-self: end; //y  
justify-self: end; //x