Как разместишь элементы равномерно по экрану?

Задача

Нужно разместить элементы так, чтобы они занимали равное пространство и были равномерно распределены по экрану.

Решение 1: Flexbox с justify-content

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

// CSS
.container {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 20px;
  width: 100%;
}

.item {
  flex: 1;
  height: 100px;
  background: blue;
  display: flex;
  align-items: center;
  justify-content: center;
}

// Альтернативы justify-content:
// space-around - пространство вокруг элементов
// space-evenly - одинаковое пространство везде
// center - по центру

Решение 2: CSS Grid с equal columns

// HTML
<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
</div>

// CSS
.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  padding: 20px;
  width: 100%;
}

.grid-item {
  background: green;
  min-height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

// Альтернативы:
// repeat(auto-fit, minmax(200px, 1fr)) - адаптивное
// repeat(auto-fill, minmax(200px, 1fr)) - заполняет пространство

Решение 3: Tailwind CSS (современный подход)

export function EvenSpacedItems() {
  const items = [1, 2, 3, 4];

  return (
    // Вариант 1: flex с space-between
    <div className="flex justify-between gap-4 w-full">
      {items.map(item => (
        <div key={item} className="flex-1 bg-blue-500 h-24 flex items-center justify-center">
          {item}
        </div>
      ))}
    </div>

    // Вариант 2: grid с equal columns
    <div className="grid grid-cols-4 gap-4 w-full">
      {items.map(item => (
        <div key={item} className="bg-green-500 h-24 flex items-center justify-center">
          {item}
        </div>
      ))}
    </div>

    // Вариант 3: space-around
    <div className="flex justify-around gap-4 w-full">
      {items.map(item => (
        <div key={item} className="flex-1 bg-purple-500 h-24 flex items-center justify-center">
          {item}
        </div>
      ))}
    </div>
  );
}

Решение 4: Адаптивная сетка (responsive)

// CSS
.responsive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  width: 100%;
  padding: 20px;
}

.grid-item {
  background: lightblue;
  min-height: 150px;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

// На узких экранах: 1 колонка
// На средних: 2-3 колонки
// На широких: 4+ колонки

Решение 5: Для компонентов с динамичным количеством

import React from 'react';

export function DynamicGrid({ items }) {
  const itemCount = items.length;
  
  const getColumnCount = (count) => {
    if (count <= 2) return count;
    if (count <= 4) return Math.ceil(count / 2) === 2 ? 2 : count;
    return 4;
  };

  const columns = getColumnCount(itemCount);

  return (
    <div 
      className="w-full gap-4 p-4"
      style={{
        display: 'grid',
        gridTemplateColumns: `repeat(${columns}, 1fr)`
      }}
    >
      {items.map((item, index) => (
        <div 
          key={index} 
          className="bg-gradient-to-r from-blue-400 to-blue-600 h-24 rounded-lg flex items-center justify-center text-white font-bold"
        >
          {item}
        </div>
      ))}
    </div>
  );
}

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

• Flexbox: для одномерных макетов (одна строка)
• Grid: для двумерных макетов (матрица)
• Tailwind: быстрое прототипирование
• auto-fit/auto-fill: автоматическая адаптация

Лучшие практики

1. Используй flexbox для одномерных макетов
2. Используй grid для двумерных макетов
3. gap вместо margin для расстояний
4. Избегай абсолютного позиционирования
5. Проверь адаптивность на разных размерах