时间戳

首页 > 解决方案 > 通过 CSS Grid 突破侧边栏元素

html - 通过 CSS Grid 突破侧边栏元素

问题描述

我正在尝试实现一个布局，其中多个不同高度的元素堆叠在移动屏幕上，一些元素形成桌面侧边栏，大致如下所示：

布局

我的第一个想法是通过 CSS 网格来实现它，定义一行两列，然后根据类（橙色与灰色）分配网格区域：

密码笔

.layout {
  display: grid;
  max-width: 860px;
  margin: 0 auto;
  gap: 20px;
}

@media(min-width: 860px) {
  .layout {
    grid-template-areas: 'main sidebar';
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  }
}

.sidebar {
  grid-area: sidebar;
}

.content {
  grid-area: main;
}

问题：由于多个侧边栏元素现在占据同一个网格单元，它们重叠而不是仅仅在彼此之上流动。几天来，我一直在尝试寻找替代解决方案，但到目前为止，我找不到任何不涉及使用 JavaScript 重新排序 dom 的解决方案。我错过了显而易见的事情吗？

编辑

答案中所述的 Flexbox 并不能解决这个问题（如果可能预先知道列表中元素的位置，但事实并非如此）。一些元素放在侧边栏中，一些元素放在主栏中，同时在移动布局中具有固定顺序。

标签： htmlcsscss-grid

解决方案

使用 Flexbox，那么您可以轻松做到这一点。

参考以下代码，

.layout {
  display: flex;
  flex-wrap: wrap;
  max-width: 860px;
  margin: 0 auto;
  gap: 20px;
}

根据需要设置正确的 div （容器）顺序，（以下代码是示例之一）

<div id="main">
  <div style="background-color:coral;" id="myRedDIV"></div>
  <div style="background-color:lightblue;" id="myBlueDIV"></div>
  <div style="background-color:lightgreen;" id="myGreenDIV"></div>
  <div style="background-color:pink;" id="myPinkDIV"></div>
</div>

#main {
  width: 100%;
  height: 150px;
  border: 1px solid #c3c3c3;
  display: flex;
  flex-wrap: wrap;
}

#main div {
  width: 70px;
  height: 70px;
}


/* Standard syntax */
div#myRedDIV   {order: 1;}
div#myBlueDIV  {order: 4;}
div#myGreenDIV {order: 3;}
div#myPinkDIV  {order: 2;}

有关 Flexbox 中订单的更多信息，请参阅以下链接

Link1 --> 关于 Flexbox 订单

Link2 --> 关于 Flexbox 订单

推荐阅读