Как сделать три колонки на css
1 ответ
от
jose ,
7 месяцев назад
@ludie
Для создания трех колонок на CSS вы можете использовать flexbox или grid.
- Используя Flexbox: HTML-разметка:
1 2 3 4 5 |
<div class="container"> <div class="column">Колонка 1</div> <div class="column">Колонка 2</div> <div class="column">Колонка 3</div> </div> |
CSS-стили:
1 2 3 4 5 6 7 8 9 |
.container {
display: flex;
justify-content: space-between;
}
.column {
flex: 1;
margin: 0 10px;
}
|
- Используя Grid: HTML-разметка:
1 2 3 4 5 |
<div class="container"> <div class="column">Колонка 1</div> <div class="column">Колонка 2</div> <div class="column">Колонка 3</div> </div> |
CSS-стили:
1 2 3 4 5 6 7 8 9 |
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
}
.column {
margin: 0 10px;
}
|
Оба подхода создадут контейнер с тремя колонками, в которых вы можете добавить свое содержимое, например, текст или другие HTML-элементы. Во flexbox мы используем justify-content: space-between, чтобы равномерно распределить колонки по контейнеру с пробелами между ними, а в grid мы используем grid-template-columns и grid-gap, чтобы создать сетку из трех колонок с пробелами между ними.
15