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

.item {
  background: #f0f0f0;
  padding: 20px;
  border-radius: 10px;
}

.container {
  display: grid;
  grid-template-columns: 1fr 2fr;
}

.item {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

auto-fit

auto-fill

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

.item {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.header_logo {
    display: block;
    width: 100px; /* Задаем ширину */
    height: auto; /* Сохраняем пропорции */
}

.container {
  display: grid;
  grid-template-columns: 1fr 2fr; /* Первый столбец - 1 часть, второй - 2 части */
  grid-template-rows: 100px auto; /* Первая строка фиксированная, вторая подстраивается */
}

.container {
  gap: 20px; /* Пробел между всеми строками и колонками */
}

<div class="container">
  <div>1</div>
  <div>2</div>
</div>

<style>
.container {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 10px;
}
.container div {
  background: lightblue;
  text-align: center;
  padding: 20px;
}
</style>

.container {
  justify-items: center; /* Выравнивание по горизонтали */
  align-items: center; /* Выравнивание по вертикали */
}

.container {
  grid-template-areas:
    "header header"
    "menu main"
    "footer footer";
}

.header { grid-area: header; }
.menu { grid-area: menu; }
.main { grid-area: main; }
.footer { grid-area: footer; }

<!-- HTML -->
<div class="container">
  <div class="item">Элемент 1</div>
  <div class="item">Элемент 2</div>
  <div class="item">Элемент 3</div>
</div>

/* CSS */
.container {
  display: flex;
  width: 600px;           /* Ширина контейнера */
  border: 2px solid #333; /* Обрамление для наглядности */
}

.item {
  flex-grow: 1;           /* Каждый элемент растёт одинаково! */
  border: 1px solid #666;
  padding: 10px;
}

[Контейнер: 600px]
+-----------------------------------------------------------------+
| Элемент 1     |    Элемент 2   | Элемент 3     |
| (flex-grow:1) | (flex-grow:1)  | (flex-grow:1) |
+-----------------------------------------------------------------+

.item:nth-child(1) {
  flex-grow: 1;
}

.item:nth-child(2) {
  flex-grow: 2;
}

.item:nth-child(3) {
  flex-grow: 1;
}

[Контейнер: 600px]
+-------------------------------------------------------+
|  Элемент 1 | 🚀 Элемент 2 (больше места!) |  Элемент 3 |
|  (1 unit)   |         (2 units)          |  (1 unit)    |
+-------------------------------------------------------+
 

Представьте, что общее количество "единиц роста" равно 4. Наш второй элемент получает 2 единицы, а остальные – по одной. Вуаля – наш суперзвезда занимает больше места!

flex-basis: базовый размер элемента (как отправная точка) 📏
flex-shrink: способность элемента уменьшаться, если места становится меньше 📉
flex-grow: способность элемента увеличиваться, если есть свободное пространство 📈

.item {
  flex: 1 1 100px;  /* flex-grow: 1, flex-shrink: 1, flex-basis: 100px */
}

[Контейнер: 600px]
+-----------------------------------------------------+
| [100px + extra] |  [100px + extra] |  [100px + extra] |
+-----------------------------------------------------+

💬 Здесь каждый элемент растёт, получая равную долю из дополнительного пространства. Все в команде работают сообща!

.visually-hidden {
  position: absolute; /* элемент вырывают из потока */
  width: 1px; /* делают элемент очень маленьким, но таким, чтобы не пропал совсем */
  height: 1px;
  margin: -1px; /* элемент убирают из поля зрения, сдвинув на размер самого себя */
  padding: 0; /* обнуляют отступы, они есть у некоторых элементов по умолчанию */
  border: 0; /* убирают границу, она тоже может быть у каких-то элементов */
  clip: rect(0 0 0 0); /* это свойство обрезает видимую область до нулевого значения */
  overflow: hidden; /* на всякий случай скрывают видимое за пределами блока */
}

(id, class/атрибут/псевдокласс, тег/псевдоэлемент)

/* Вес: 0.0.1 — тег */
span {
  color: red;
}

/* Вес: 0.1.0 — класс */
.text {
  color: blue;
}

/* Вес: 0.1.1 — тег + класс */
span.text {
  color: green;
}

/* Вес: 1.0.0 — идентификатор */
#main {
  color: purple;
}

#main > span.text > .text > span