Управление позициями div
У меня есть несколько div (1, 2 и 3 завернуты в контейнер):
И мне нужно изменить эти div в соответствии с адаптивным дизайном следующим образом:
Как я могу этого добиться? Может быть, с помощью сетки?
@dippas Потому что «усилия» никогда не требуются в вопросе о переполнении стека. Недостаток усилий не является и никогда не был близкой причиной.
Я видел десятки, если не больше, закрытых вопросов такого типа.
Я видел десятки откровенно не по теме вопросов, которые не были закрыты, @dippas. Не все в Stack Overflow идеально. Если вы хотите отметить другие вопросы, которые, по вашему мнению, закрыты некорректно, пожалуйста, продолжайте.
Ответы 1
CSS-Grid помогает нам добиться этого без использования каких-либо дополнительных оберток и без сокрытия не скрываемых вещей с помощью медиа-запросов. В этом случае я использую grid-areas понятие CSS-Grid. Хотя того же можно добиться и с помощью grid-lines концепции CSS-Grid.
.main {
display: grid;
grid-template-columns: repeat(7, 1fr);
grid-auto-rows: minmax(100px, auto);
max-width: 960px;
margin: 0 auto;
gap: 1rem;
/* Placing grid-items inside our grid */
grid-template-areas:
"one one one one four four four"
"one one one one four four four"
"two two two two four four four"
"two two two two four four four"
"three three three three four four four";
}
.one,
.two,
.three,
.four {
border: 1px solid #777;
text-align: center;
line-height: 5.5;
font-size: 2rem;
font-weight: 700;
}
.one {
grid-area: one;
}
.two {
grid-area: two;
}
.three {
grid-area: three;
}
.four {
grid-area: four;
}
@media (max-width: 768px) {
.main {
width: 70%;
grid-template-columns: repeat(3, 1fr);
grid-template-areas:
"one one one"
"one one one"
"two two two"
"two two two"
"four four four"
"four four four"
"four four four"
"four four four"
"three three three";
}
}<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8" />
<meta name = "viewport" content = "width=device-width, initial-scale=1.0" />
<title>Todo | Asynchronous Dynamaic Data</title>
<link rel = "stylesheet" href = "./style.css" />
</head>
<body>
<main class = "main">
<div class = "one"> 1</div>
<div class = "two"> 2</div>
<div class = "three">3</div>
<div class = "four">4</div>
<main>
<script src = "./script.js"></script>
</body>
</html>ПРИМЕЧАНИЕ. То же самое можно сделать и с помощью flexbox, однако нам потребуется дополнительный код. Некоторый контент просто нужно скрыть на маленьких экранах, а другой показать вместе со свойством orderflexbox..
Да, я использую flexbox, но не думайте о grid-row! Спасибо
Это также возможно с flexbox:
Я сделаю это для вас :)
Использование flexbox с заказом?
Ага: Только с этим :)
И используя flex-direction:column :)
@ Коди Грей не хочет объяснить, почему открыл этот вопрос, который вообще не показывает никаких усилий?