Краткая справка по CSS

.container {
    display: grid; /* или inline-grid */
}

.container {
    display: grid;
    grid-template-columns: 100px 200px auto;  /* 3 колонки */
    grid-template-rows: 80px 100px;           /* 2 строки */
}

grid-template-columns: 1fr 2fr 1fr;  /* 4 части: 1, 2, 1 */

grid-template-columns: repeat(4, 1fr);  /* 4 колонки по 1fr */
grid-template-rows: repeat(3, auto);    /* 3 строки */

grid-template-columns: 100px repeat(2, 1fr) 200px;

gap: 20px;              /* одинаковые */
gap: 10px 20px;         /* row-gap column-gap */

.item {
    grid-column-start: 1;
    grid-column-end: 3;   /* занимает колонки 1 и 2 */
    grid-row-start: 2;
    grid-row-end: 4;
}

.item {
    grid-column: 1 / 3;   /* старт / конец */
    grid-row: 2 / 4;
}

grid-column: 2 / span 3;   /* с колонки 2, ширина 3 ячейки */
grid-row: span 2;          /* занять 2 строки */

grid-template-columns: [start] 1fr [middle] 2fr [end];
.item {
    grid-column: start / end;
}

.container {
    display: grid;
    grid-template-areas: 
        "header header header"
        "sidebar main main"
        "footer footer footer";
}
.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }
.footer  { grid-area: footer; }

grid-template-areas: 
    "header header header"
    ".       main   main";

justify-content: start | center | space-between;  /* по горизонтали */
align-content: start | center | space-between;    /* по вертикали */

justify-items: start | center | stretch;  /* по горизонтали внутри ячейки */
align-items: start | center | stretch;    /* по вертикали внутри ячейки */

.item {
    justify-self: end;
    align-self: center;
}

/* Адаптивная сетка — минимальная 200px, максимальная 1fr */
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

.page {
    display: grid;
    grid-template-columns: 250px 1fr;
    grid-template-rows: auto 1fr auto;
    gap: 10px;
    height: 100vh;
}
.header  { grid-column: 1 / 3; }
.footer  { grid-column: 1 / 3; }