Bootstrap 5 Адаптивный макет карточек/сеток/столбцов, как это сделать?
Я пытаюсь создать макет HTML, похожий на изображение ниже. Кажется, я не могу добиться этого с помощью Bootstrap 5 и сохранить все отзывчивым.
Любая помощь будет оценена по достоинству!
Я попытался создать два столбца: один для большой карты... а затем справа разместить карты поменьше. Но правые столбцы складываются только друг на друга, а не рядом...
Должен ли широкий первый элемент div совпадать с тремя полями ниже, потому что на вашем изображении это не так!
Ответы 2
Bootstrap как фреймворк хорош для решения большинства проблем. Однако это не решение всех проблем.
Сетка Bootstrap всегда состоит из 12 столбцов. Ваша сетка на рисунке состоит из 7 столбцов. 7 столбцов не умещаются в 12 (1,2,3,4,6 можно).
Итак, вам осталось написать свою собственную сетку.
Во-первых, вам нужен контейнер и создайте макет из 7 столбцов. Вы можете сделать это, используя этот CSS:
.container {
display: grid;
grid-template-columns: repeat(7, 1fr);
}
затем вы должны позволить первому блоку охватывать несколько столбцов и строк, что можно сделать, добавив это к первой карточке:
.first-card {
grid-column: span 3;
grid-row: span 2;
}
Если вы хотите, чтобы коробки меньшего размера были квадратами, как на картинке, вы можете просто использовать aspect-ratio: 1;
/* script just for creating the elements */
for (let i = 0; i < 23; i++) {
let card = document.createElement('div');
card.classList.add('card');
card.textContent = i + 1;
container.appendChild(card);
}
#container {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 0.5em;
.card {
background-color: orange;
color: white;
font-size: 2em;
display: flex;
justify-content: center;
align-items: center;
&:nth-child(1) {
grid-column: span 3;
grid-row: span 2;
}
&:not(:nth-child(1)) {
aspect-ratio: 1;
}
}
}<div id = "container"></div>Это, конечно, можно сделать и в ответ. Если да, вам необходимо предоставить более подробную информацию о том, как сетка должна изменяться в определенных окнах просмотра.
Да, ЕСЛИ широкий первый элемент div должен совпадать с тремя ниже, но на примере изображения этого не видно.
Да, вы можете создать макет с помощью начальной загрузки. Вот код
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet">
<link href = "https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel = "stylesheet">
<title>Bootstrap Example</title>
<script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body class = "p-3 m-0 border-0 bd-example m-0 border-0 bd-example-row">
<!-- Example Code -->
<div class = "container text-center">
<div class = "row">
<div class = "col-sm-4 mx-1">
</div>
<div class = "col mx-1">
<div class = "row">
<div class = "col mx-1"></div>
<div class = "col mx-1"></div>
<div class = "col mx-1"></div>
<div class = "col mx-1"></div>
</div>
<div class = "row">
<div class = "col mx-1"></div>
<div class = "col mx-1"></div>
<div class = "col mx-1"></div>
<div class = "col mx-1"></div>
</div>
</div>
</div>
<div class = "row">
<div class = "col mx-1"></div>
<div class = "col mx-1"></div>
<div class = "col mx-1"></div>
<div class = "col mx-1"></div>
<div class = "col mx-1"></div>
<div class = "col mx-1"></div>
<div class = "col mx-1"></div>
</div>
<div class = "row">
<div class = "col mx-1"></div>
<div class = "col mx-1"></div>
<div class = "col mx-1"></div>
<div class = "col mx-1"></div>
<div class = "col mx-1"></div>
<div class = "col mx-1"></div>
<div class = "col mx-1"></div>
</div>
</div>
ссылка на скрипку: https://jsfiddle.net/2hdmwgpL/
Нет, это не так. Пожалуйста, проверьте ваш вывод.
Рассмотрите официальную документацию по начальной загрузке