相关疑难解决方法(0)

什么时候

grid-template-areas:
       "....... header  header"
       "sidebar content content";

改为:

grid-template-areas:
       "....... header  header"
       "sidebar header content";

一切都崩溃了.

如何使用CSS Grid布局实现相同的效果？

body {
  margin: 40px;
}

.sidebar {
  grid-area: sidebar;
}

.content {
  grid-area: content;
}

.header {
  grid-area: header;
}

.wrapper {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 120px 120px 120px;
  grid-template-areas: "....... header  header"
                       "sidebar content content";
  background-color: #fff;
  color: #444;
}

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
}

.header {
  background-color: #999;
}

<div …

我正在玩CSS网格.

当我在桌面大小上查看它时,(min-width: 769px)我有一行有3列 - 如下所示:

---------------------------------------------
|   col 1     |         col 2       | col 3 |
|             |                     |       |
---------------------------------------------

我可以使用css-grid移动列,这样我就可以在移动布局上执行以下操作:

---------------------------------------------
|     col 1             |      col 3        |
|                       |                   |
---------------------------------------------
|                     col 2                 |
---------------------------------------------

我知道我用这样的东西跨越细胞:

.content{
  grid-column: 1 / span2;
}

但我想改变列的顺序.没有预处理器,我可以这样做吗？

这是我当前的网格类:

.my-grid {
   display:grid;
   grid-template-columns: 15% 1fr 25% ;
   grid-template-rows: 1fr; /* for as many rows as you need */
   grid-gap: 10px;
   border: 2px solid #222;
   box-sizing: border-box;
}

尽管事实上我已经指定了我希望导航延伸到哪些列,但是如果你可以查看我的代码并指出我的错误,我一直无法让导航完全延伸到我的列.太棒了

这是浏览器中HTML文件的图像

body {
  margin: 0;
  padding: 0;
}

.container {
  max-width: 960px;
  width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 4fr 1fr;
  grid-template-rows: 50px auto;
}

.mainnav {
  grid-column: 1 / 2;
  grid-row: 1 / 1;
  background-color: #5eccc0;
}

.navul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.navli {
  float: left;
  text-align: center;
}

.navli a {
  display: block;
  text-decoration: none;
}

main {
  grid-column: 1 / 1;
  grid-row: 2 / 2;
  background-color: #ffff77;
}

.sidebar {
  background-color: …