YeaHub Tech on Telegram: “🔖 CSS Grid: Вёрстка без DIV'ов CSS Grid

🔖 CSS Grid: Вёрстка без DIV'ов

CSS Grid — один контейнер делится на строки и столбцы в CSS. Все элементы располагаются как на шахматной доске.

📎Суть

Вместо кучи DIV'ов для раскладки:

.page {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: 80px 1fr 50px;
  grid-template-areas:
    'sidebar header'
    'sidebar main'
    'sidebar footer';
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }

Вот так! Рисуешь структуру в CSS, как картинку.

🔸 Главные юниты

fr — "fraction", волшебный юнит Grid'а:

/* 1/4 и 3/4 пространства, автоматически пересчитывается */
grid-template-columns: 1fr 3fr;

repeat() — копирование столбцов:

/* 7 столбцов одинаковой ширины (календарь) */
grid-template-columns: repeat(7, 1fr);

Элементы занимают несколько ячеек

.child {
  grid-column: 1 / 4;  /* от столбца 1 до 4 */
  grid-row: 1 / 3;     /* от строки 1 до 3 */
}

✅ Когда использовать

🔸 Двумерные раскладки (строки + столбцы)
🔸 Сетки (карточки, галереи)
🔸 Страницы (header/sidebar/main/footer)

❌ Для навигации по одной оси → Flexbox проще

Главное ⬇️

Чистый HTML, вся вёрстка в CSS!
Интерактивный гайд по ссылке ниже

📎 Статья

🎙 Новости

📝 База вопросов