只有css的侧边栏中的响应性重定位稀疏元素

我想制作一个响应式布局，其中一列在移动设备上，两列在桌面上。

在一篇非常古老的网络文章中，作者使用了javascript，但我想在现代浏览器中，你只能使用css。

响应式布局

到目前为止，我所能达到的最好结果是使用以下代码，但在桌面模式下，我无法将侧边栏项目一个接一个地放置。

我认为网格布局不是正确的方法。

.container {
display: grid;
grid-template-columns: auto auto;
}
.main {
background-color: blue;
grid-column: 1;
}
.sidebar {
background-color: green;
grid-column: 2;
}
@media screen and (max-width: 600px) {
.container {
grid-template-columns: auto;
}
.main, .sidebar {
grid-column: 1;
}
}

<div class="container">
<div class="main"><span>A1</span></div>
<div class="sidebar"><span>B1</span></div>
<div class="main"><span>A2</span></div>
<div class="main"><span>A3</span></div>
<div class="sidebar"><span>B2</span></div>
<div class="main"><span>C1</span></div>
</div>

感谢@vineet-yagi的建议，我在下面添加了一个对我很有效的解决方案：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container {
display: grid;
grid-template-columns: auto auto;
grid-auto-flow: dense;
}
.main {
background-color: blue;
grid-column: 1;
}
.sidebar {
background-color: green;
grid-column: 2;
height: fit-content;
}
@media screen and (max-width: 600px) {
.container {
grid-template-columns: auto;
}
.main, .sidebar {
grid-column: 1;
}
}
</style>
</head>
<body>
<div class="container">
<div class="main">
A1
</div>
<div class="sidebar">
B1
</div>
<div class="main">
A2<br>A2<br>A2<br>A2
</div>
<div class="main">
A3
</div>
<div class="sidebar">
B2
</div>
<div class="main">
C1
</div>
</div>
</body>
</html>

添加"网格自流：密集"也可以添加到容器类。

.container { 
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: 10px;
grid-auto-rows: 100px;
}
.container .main,
.container .sidebar {
border: 1px solid black;
}
.container .sidebar {
background:red;
}
@media screen and (min-width: 600px) {
.container {
grid-template-columns: repeat(2, 1fr);
}

.container .sidebar {
grid-column: 2 / 3;
}

.container .sidebar:nth-child(3) {
grid-row: 2 / 1;
background: red;
}

.container .main {
grid-column: 1 / 2;
}

.container .main:nth-last-child(1) {
grid-row: 1 / 1;
}
.container .main:nth-last-child(2) {
grid-row: 2 / 2;
}
}

<div class="container">
<div class="sidebar"><span>sidebar - B2</span></div>
<div class="main"><span>main - A1</span></div>
<div class="sidebar"><span>sidebar - B1</span></div>
<div class="main"><span>main - C1</span></div>
<div class="main"><span>main - A2 </span></div>
<div class="main"><span>main - A3</span></div>
</div>

相关内容

最新更新

热门标签：