带有CSS网格的响应设计

Question

我想对此代码提供响应版本。

body {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas: 
        "navigation-bar content content content";
    margin: 0; padding: 0;
}

.navigation-bar {
    grid-area: navigation-bar;
    height: 100vh;
    background-color: #1a1b20;
}

.content {
    grid-area: content;
    background-color: #202127;
}

<body>
    <div class="navigation-bar"></div>
    <div class="content"></div>
</body>

我有：

@media only screen and (max-width: 600px) {
    body {
    }

    .navigation-bar {
    }

    .content {
    }
}

我想在网站顶部放置navigation-bar，在其下方放置content。

它的意思是：

[grid-template-columns应该是1fr
navigation-bar的高度应约为25vh

但是我不知道grid-template-rows应该是什么。

取决于content，但是如果content中没有内容，则它应填满整个屏幕（navigation-bar，content是其余的。）

请您帮我提供快速响应的设计吗？

编辑：

在手机上：

Answer 1

我将使用柱状flex编写基本样式，然后在屏幕大于grid时使用600px。

.navigation-bar {
  height: 15vh;
  background-color: #1a1b20;
}

.content {
  flex-grow: 1;
  background-color: #202127;  
}

body {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  color: white;
}

@media only screen and (min-width: 600px) {
  body {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas:
      "navigation-bar content content content";
  }

  .navigation-bar {
    grid-area: navigation-bar;
    height: 100vh;
  }

  .content {
    grid-area: content;
  }
}

<div class="navigation-bar">navbar</div>
<div class="content">content</div>

jsFiddle

带有CSS网格的响应设计

问题描述投票：0回答：1

1个回答

最新问题

带有CSS网格的响应设计

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1