PrepBro
← Назад к вопросам

Какие знаешь способы создания сетки layout?

2.3 Middle🔥 111 комментариев
#HTML и CSS

Комментарии (1)

🐱
claude-haiku-4.5PrepBro AI2 апр. 2026 г.(ред.)

Ответ сгенерирован нейросетью и может содержать ошибки

Способы создания сетки (Grid Layout)

1. CSS Grid (Современный стандарт)

CSS Grid — самый мощный способ создания двумерных сеток. Он контролирует и строки, и колонки одновременно.

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto 1fr auto;
  gap: 20px;
}

.item {
  background: lightblue;
  padding: 20px;
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>

Преимущества:

  • Полный контроль над строками и колонками
  • Динамическое изменение через grid-auto-rows, grid-auto-columns
  • Возможность явно указать позицию элемента
  • Отличная поддержка браузерами

Недостатки:

  • Сложнее для одномерных раскладок
  • Требует больше CSS кода

Примеры CSS Grid

/* 3 колонки одинакового размера */
.grid-equal {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
}

/* 3 колонки, первая 200px, остальные поровну */
.grid-mixed {
  display: grid;
  grid-template-columns: 200px 1fr 1fr;
  gap: 20px;
}

/* Автоматическое количество колонок */
.grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

/* Назначенные области */
.grid-areas {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 100px 1fr 100px;
  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; }

2. Flexbox (Одномерные раскладки)

Flexbox — лучше для одномерных раскладок (строка или столбец). Элементы автоматически подстраиваются.

.container {
  display: flex;
  flex-direction: row;
  gap: 20px;
  flex-wrap: wrap;
}

.item {
  flex: 1;
  min-width: 200px;
  background: lightblue;
  padding: 20px;
}

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

  • Горизонтальная навигация
  • Вертикальное меню
  • Карточки в ряд
  • Центрирование элементов

Преимущества:

  • Проще чем Grid
  • Отличная поддержка браузерами
  • Идеально для компонентов

Недостатки:

  • Только одно измерение
  • Сложнее выравнивать несвязанные элементы

Примеры Flexbox

/* Горизонтальная навигация */
.navbar {
  display: flex;
  gap: 20px;
  align-items: center;
}

/* Элементы с одинаковой шириной */
.cards {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.card {
  flex: 1;
  min-width: 250px;
}

/* Вертикальное центрирование */
.centered {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}

/* Пространство между элементами */
.space-between {
  display: flex;
  justify-content: space-between;
}

3. Float (Устаревший способ)

Float — старый способ, сейчас практически не используется, но нужно знать для legacy кода.

.container {
  overflow: hidden; /* Clearfix */
}

.item {
  float: left;
  width: 33.333%;
  padding: 20px;
  box-sizing: border-box;
}

Почему не использовать:

  • Сложно для выравнивания
  • Требует clearfix хаков
  • Grid и Flexbox намного лучше
  • Поддержка браузеров устаревает

4. Inline-Block (Очень устаревший)

.container {
  font-size: 0; /* Убираем пробелы между inline-block элементами
}

.item {
  display: inline-block;
  width: 33.333%;
  padding: 20px;
  font-size: 16px; /* Возвращаем размер шрифта */
  box-sizing: border-box;
}

Недостатки:

  • Проблема с пробелами между элементами
  • Сложно выравнивать
  • Требует хаков
  • Используй Grid или Flexbox вместо этого

5. Таблицы (Неправильное использование)

<!-- ❌ Никогда не делай так для раскладки! -->
<table>
  <tr>
    <td>Ячейка 1</td>
    <td>Ячейка 2</td>
    <td>Ячейка 3</td>
  </tr>
</table>

Почему не использовать:

  • Таблицы для данных, не для раскладки
  • Плохо для доступности
  • Сложнее мобильная адаптация
  • Медленно отрисовывается браузером

Сравнение методов

МетодРазмерностьСложностьПоддержкаКогда использовать
Grid2DВысокая95%+Лейауты страниц
Flexbox1DСредняя99%+Компоненты, навигация
Float1DВысокая100%Только legacy
Inline-Block1DВысокая100%Не использовать
Таблицы2DНизкая100%Только для данных

Практические примеры

Пример 1: Классический лейаут (Grid)

<style>
  .page {
    display: grid;
    grid-template-columns: 250px 1fr;
    grid-template-rows: 60px 1fr 60px;
    gap: 20px;
    min-height: 100vh;
  }

  .header {
    grid-column: 1 / -1;
    background: #333;
    color: white;
  }

  .sidebar {
    background: #f0f0f0;
  }

  .main {
    background: white;
  }

  .footer {
    grid-column: 1 / -1;
    background: #333;
    color: white;
  }
</style>

<div class="page">
  <div class="header">Header</div>
  <div class="sidebar">Sidebar</div>
  <div class="main">Main Content</div>
  <div class="footer">Footer</div>
</div>

Пример 2: Карточки (Grid с auto-fit)

<style>
  .cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    padding: 20px;
  }

  .card {
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
  }
</style>

<div class="cards">
  <div class="card">Card 1</div>
  <div class="card">Card 2</div>
  <div class="card">Card 3</div>
  <div class="card">Card 4</div>
</div>

Пример 3: Навигация (Flexbox)

<style>
  .navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background: #333;
  }

  .nav-menu {
    display: flex;
    gap: 30px;
    list-style: none;
  }

  .nav-menu a {
    color: white;
    text-decoration: none;
  }
</style>

<nav class="navbar">
  <div class="logo">Logo</div>
  <ul class="nav-menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

Пример 4: Адаптивный лейаут

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  padding: 20px;
}

/* На мобильных: 1 колонка */
@media (max-width: 768px) {
  .container {
    grid-template-columns: 1fr;
  }
}

/* На планшетах: 2 колонки */
@media (min-width: 768px) and (max-width: 1024px) {
  .container {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* На десктопах: 3+ колонки */
@media (min-width: 1024px) {
  .container {
    grid-template-columns: repeat(3, 1fr);
  }
}

Современный подход (2024)

Для раскладок:        Grid
Для компонентов:      Flexbox
Для данных:           HTML table
Для чего-то другого:  Не использовать Float/Inline-Block

Вывод

В современной разработке:

  • CSS Grid — для лейаутов страниц и двумерных раскладок
  • Flexbox — для компонентов и одномерных раскладок
  • Float и Inline-Block — только в legacy коде
  • Таблицы — только для табличных данных

Эти два метода покрывают 99% всех потребностей в раскладке.

Какие знаешь способы создания сетки layout? | PrepBro