CSS Flexbox та Grid шпаргалка

CSS Flexbox та Grid шпаргалка

Два головні інструменти для побудови макетів. Тримай під рукою — тут зібрано всі властивості з візуальними прикладами.

Детальніше про Flexbox — в уроках Flexbox частина 1 та Flexbox частина 2, про Grid — в уроці CSS Grid.

Коли що використовувати?

Flexbox — властивості контейнера

.container {
  display: flex; /* або inline-flex */
}

justify-content — вирівнювання по головній осі

justify-content — всі значення

align-items — вирівнювання по поперечній осі

align-items — всі значення

Flexbox — властивості елементів

flex-grow — як елементи розширюються

flex-grow — візуалізація

flex-shrink — як елементи стискаються

flex-shrink — візуалізація

Типові значення flex

Grid — властивості контейнера

.container {
  display: grid; /* або inline-grid */
}

fr — дробові одиниці

fr одиниці — як ділиться простір

repeat() та minmax()

repeat та minmax — візуалізація

auto-fit vs auto-fill

auto-fit vs auto-fill — різниця

justify-items / align-items — вирівнювання в комірці

justify-items та align-items в Grid

grid-auto-flow — напрямок заповнення

grid-auto-flow — row, column, dense

Grid — властивості елементів

grid-column / grid-row — об'єднання комірок

grid-column та grid-row span

grid-template-areas — іменовані ділянки

grid-template-areas — візуалізація

Рецепти

Центрування елемента (Flexbox)

.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

Responsive сітка карток (Grid)

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

Sidebar + контент (Grid)

.layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 2rem;
}

Рівні колонки (Flexbox)

.columns {
  display: flex;
  gap: 1rem;
}
.columns > * {
  flex: 1;
}

Sticky footer (Flexbox)

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
main {
  flex: 1;
}