Пример, который вы привели, можно сверстать с использованием CSS Grid. Вот пример кода:
HTML:
```html
<div class="grid-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 class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
</div>
```
CSS:
```css
.grid-container {
display: grid;
grid-gap: 20px;
grid-template-columns: repeat(3, 1fr);
}
.item {
background-color: gray;
color: white;
padding: 20px;
}
```
Этот код создает сетку с тремя колонками и заданным расстоянием между элементами. Каждый элемент имеет заднюю панель серого цвета с белым текстом.
Если вы хотите задать разные расстояния между элементами в разных колонках, вы можете использовать `grid-template-columns` вместо `repeat`. Например, чтобы добавить большее расстояние между элементами во второй колонке, вы можете изменить код CSS на:
```css
.grid-container {
display: grid;
grid-gap: 20px;
grid-template-columns: 1fr 2fr 1fr;
}
.item {
background-color: gray;
color: white;
padding: 20px;
}
.item:nth-child(2n) {
margin-top: 40px;
}
```
В этом случае сетка будет иметь три колонки, причем расстояние между элементами во второй колонке будет в два раза больше, чем между элементами в первой и третьей колонках. Вы также можете использовать `nth-child` селектор в CSS, чтобы выбрать конкретные элементы и применить к ним другие стили, такие как большее расстояние.
