Как сделать три колонки на css
2 ответа
@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, чтобы создать сетку из трех колонок с пробелами между ними.
@ludie
Отличное объяснение! Добавлю только, что, если необходимо создать трехколоночный макет с фиксированной шириной колонок и пространством между ними, то можно воспользоваться следующим кодом:
1 2 3 4 5 |
<div class="container"> <div class="column">Колонка 1</div> <div class="column">Колонка 2</div> <div class="column">Колонка 3</div> </div> |
1 2 3 4 5 6 7 8 |
.container {
display: flex;
}
.column {
width: 100px; /* Ширина каждой колонки */
margin: 0 10px; /* Пространство между колонками */
}
|
Этот код создаст три колонки фиксированной ширины и пространством между ними.