如何使用网格重新定位侧边栏

Question

我有一个经典布局：

#divleft{
    float:left;
}

#sidebar{
    float:right;
}

@media screen and (max-width: 900px) {
    #divleft, #sidebar{
        float:none; 
}

divleft 和 sidebar 是 panelb 的 children；

现在我想使用网格

#panelb{
    width:calc(100% - 30px);
    margin:25px auto 0 auto;
    display:grid;
    grid-template-columns: auto 340px;
}

在这种情况下，如何在 900px 屏幕宽度上将 sidebar 重新定位在 divleft 下方？

Answer 1

最简单的方法就是对列使用媒体查询。

#panelb {
  width: calc(100% - 30px);
  margin: 25px auto 0 auto;
  display: grid;
  grid-template-columns: 1fr 340px;
}

@media screen and (max-width: 900px) {
  #panelb {
    grid-template-columns: 1fr;
  }
}

#divleft {
  background: blue;
  height: 100px;
}

#sidebar {
  background: red;
  height: 100px;
}

<div id='panelb'>
  <div id='divleft'></div>
  <div id='sidebar'></div>
</div>

如果您想更改顺序，可以在#divleft 和#sidebar 上设置order 属性。

我还建议不要使用 id，而是类。即使对于只存在一次的元素，因为 id 具有一些其他奇怪的属性，如 "leaking" 到 window 并且在 css.

中具有更高的特异性

如何使用网格重新定位侧边栏

how to reposition sidebar using grid

css

css-grid