Grid Гриды Примеры и разное

grid.css

.grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: max-content 1fr 1fr 1fr;
    grid-gap: 2vw;

    /* Или с повторами */
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, 100px);
}

/* элементы высторятся в горизонталь */
 grid-auto-flow: column;

/* Выровнять сразу все элементы по продолжной оси */
justify-content: center; 
justify-content: space-around; 
justify-content: space-between; 
justify-content: space-evenly; 
justify-content: end;

/* Выровнять сразу все элементы по поперечной оси */
align-content: start; 
align-content: end; 
align-content: center; 
align-content: space-around; 
align-content: space-between; 
align-content: space-evenly; — Оставшееся пространство распределяется так, чтобы пространство между строками было равно пространству в начале и конце дорожки столбца. 

/* Выравнивание содержимого всех элементов по перечной оси */
align-items: center;


/* Выровнять конкретный элемент */

/* Продольная ось */
justify-items: start;
justify-items: center;
justify-items: end;
justify-items: stretch;

/* Поперечная ось */
align-self: start;
align-self: center;
align-self: end;
align-self: stretch;


/* Нумирация границ */

grid-column-start: 1;
grid-column-end:   4;

grid-row-start: 1;
grid-row-end:   4;

grid-row:    2 / 5;
grid-column: 2 / 4;

/* Текстовое содержимое по центру */
.div {
	display: grid;
    place-items: center;
    text-align: center;
}


/* Имена ячеек */

body {
    display: grid;
    grid-template-areas: "header header header" "nav article ads" "footer footer footer";
    grid-template-rows: 60px 1fr 60px;
    grid-template-columns: 20% 1fr 15%;
    grid-gap: 10px;
    height: 100vh;
    margin: 0;
}

header,
footer,
article,
nav,
div {
    padding: 20px;
    background: gold;
}

#pageHeader {
    grid-area: header;
}

#pageFooter {
    grid-area: footer;
}

#mainArticle {
    grid-area: article;
}

#mainNav {
    grid-area: nav;
}

#siteAds {
    grid-area: ads;
}