Cacher is the code snippet organizer for pro developers

Grid css
parent div {
display:grid;
grid-temlate-colums: 300px 300px 300px;
grid-temlate-rows: 250px 300px 350px;
grid-auto-flow:column; //свойство задает выборку дочерних элементов в колонку, а нижнее свойство указывает высоты колонок 
grid-template-rows:200px 200px 200px;
}

child div {
any style
}

parent div {
display:grid;
grid-temlate-colums: 300px 300px 300px // шаблон состоит из 3 колонок, ширина каждого child div 300px, их последовательность по default 

или 

grid-temlate-colums: 1fr 2fr 3fr  // шаблон состоит из 3 колонок, ширина каждого child div определяется пропорционально, исходя из указанных частей и default width parent div, которая составляет 6 частей экрана

или 

grid-temlate-colums: repeat(4, 1fr)  // шаблон состоит из 4 колонок, каждая колонки состоит из 1 фракции, по сути эта формула позволяет создать 4-колончатый шаблон, с одинаковой шириной колонки.

или 

grid-temlate-colums: repeat(2, 1fr 2fr)  // шаблон состоит из сплита, который состоит в свою очередь из 1 фракции и 2 фракций соответственно.

или 

grid-temlate-colums: 100px repeat(2, 1fr 2fr)  // ширина 1колонки 100px, после нее размещаются сплит из фракций колонок

или 

grid-temlate-colums: minmax(150px, 259px) 2fr 3fr  // шаблон состоит из 3 колонок, ширина каждого child div определяется пропорционально, исходя из указанных частей 

или 

grid-temlate-colums: repeat(auto-fill, 200px)  // обеспечивается перестраивание контейнеров при достижение ограничения в ширине экрана — работает при адаптивке шаблона.

или

grid-temlate-colums: repeat(auto-fill, minmax(200px, 1fr))  // обеспечивается перестраивание контейнеров при достижение ограничения в ширине экрана — работает при адаптивке шаблона.

или

grid-temlate-colums: repeat(auto-fit, minmax(200px, 1fr))  // обеспечивается перестраивание контейнеров при достижение ограничения в ширине экрана — работает при адаптивке шаблона. При этом контейнеры пропорционально распределяются по всей width parent div 
grid-temlate-rows: 250px 300px 350px // шаблон состоит из 3 колонок, высота первого child div 250px, второго - 300px, третьего — 350px, их последовательность по default 

или

grid-auto-rows: minmax(250px, auto); минимальная высота колонок 250px, но если в один контейнер разместить текст, который растягивает ячейку больше 250px, все ячейки в ряде будут иметь высоту в 250px​.

Или 

grid-auto-rows: 150px; // высота всех child div составляет 150px, если нет параметра grid-temlate-rows;

grid-colum-gap:20px – расстояние между колонками сетки
grid-row-gap:20px; - расстояние между рядами сетки
grid-gap: 20px – расстояние между колонками и рядами

Свойства для child div

<div class=”grid”>
<div>item1</div>
<div>item2</div>
<div>item3</div>
<div>item4</div>
<div>item5</div>
</div>

.grid div:nth-child(1) {
grid-column-start:1; //позиция/место расположения (считается что это левый край контейнера) первого контейнера считая с начала. Можно указать 2, тогда контейнер сдвинется на 1 позицию правее.
Grid-column-end:3; этот контейнер растягивается до тех пор, пока правая граница не займет 3 позицию родительского контейнера.

Или 
.grid div:nth-child(1) {
grid-column-start:1;
Grid-column-end:5;   
} 

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

Или

.grid div:nth-child(1) {
grid-column-start:1;
Grid-column-end:-1;
}

или

.grid div:nth-child(1) {
grid-column:1 / -1;
grid-row:1; // задает номер ряда можно задать 2 и контейнер займет 2 ряд
}
второй внутренний контейнер

.grid div:nth-child(2) {
grid-column:1;
grid-row:2;
}

.grid div:nth-child(3) {
grid-column:2/ 4;
grid-row:2;
}

выравнивание элементов в родительском контейнере

свойство прописывается для родительского контейнера

justify-items:end/start/center/strach – горизонтальное выравнивание child container
align-items:end/start/center/strach – вертикальное выравнивание child container

свойство прописывается для контейнеров 

align-self:end/start/center/strach – горизонтальное выравнивание child container
justify-self:end/start/center/strach – вертикальное выравнивание child container

управление областями

header {
grid-area:header;
}

aside {
grid-area:aside;
}
article {
grid-area:article;
}

footer {
grid-area:footer;
}

.grid{
display:grid;
grid-template-columns:2fr 4fr;
grid-gap:20px;
grid-template-areas:
“header” “header”
“aside” “article”
“footer” “footer”
}

@media (min-width:640px) {
.grid{
grid-template-columns:2fr 4fr;
grid-template-areas:
“header” “header”
“aside” “article”
“footer” “article”
}