Как добавить отступы между колонками в сетке (grid)?

Каким образом можно разместить точки аналогично представленной на картинке, если мне не удается найти подходящее решение?
  • 16 июля 2024 г. 0:22
Ответы на вопрос 2
Для добавления отступов между колонками в сетке (grid) можно использовать свойство grid-column-gap. Например, вы можете добавить отступ в 20 пикселей между колонками, используя следующий CSS код:

```css
.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-column-gap: 20px;
}
```

Чтобы разместить точки аналогично представленной на картинке, можно воспользоваться свойством grid-column и установить необходимое значение для каждого элемента в сетке. Например, если у вас есть сетка из трех колонок и точки должны занимать 1 колонку каждая, то можно использовать следующий CSS код:

```css
.point1 {
  grid-column: 1 / 2;
}

.point2 {
  grid-column: 2 / 3;
}

.point3 {
  grid-column: 3 / 4;
}
```

Таким образом, каждая точка будет занимать одну колонку в вашей сетке. Важно помнить, что значения grid-column указывают начальную и конечную колонку, которую занимает элемент.
Ну так в левую колонку кинь просто флекс с растущим элементом с точками 
https://codepen.io/herr-imko/pen/bGPVLKV
Похожие вопросы