CSS Grid: двовимірна розкладка

Розміщення елементів: grid-column та grid-area

📖 Теорія
CSS
1/* Розміщення дочірнього елемента вручну */
2.item {
3  /* grid-column: start / end (рядки сітки) */
4  grid-column: 1 / 3;     /* займає колонки 1 і 2 */
5  grid-column: 1 / -1;    /* від першої до останньої */
6  grid-column: span 2;    /* займає 2 колонки від поточної позиції */
7
8  grid-row: 1 / 3;        /* займає 2 рядки */
9  grid-row: span 3;
10}
11
12/* Іменовані зони — найпотужніший підхід */
💡 Приклад коду
👁 Результат: