css 网格无法填充中间列 100% vh

Question

我正在制作一个带有 css 网格的布局原型，其中我有三个网格区域，分别命名为 discovery-list、drag-handle 和 sharing-list。我需要根据屏幕调整布局width/size。当屏幕宽度小于500px时，我想垂直堆叠这三个区域：

discovery-list
drag-handle (30px high)
sharing-list

如果屏幕大于 500px 宽，我想水平放置它们：

discovery-list drag-handle sharing-list

下图展示了我想要实现的目标，但第二个对我来说还不起作用：

HTML

<div class="container">
  <div class="discovery-list">
    Discovery here
  </div>
  <div class="drag-handle">
    <div class="cancel">
      X
    </div>
    <div class="trash">
      xx
    </div>
    <div class="title">
      Title here
    </div>
    <div class="share-button">
      Share
    </div>
  </div>
  <div class="sharing-list">
    sharing list
  </div>
</div>

SASS代码

body {
  padding: 20px;
  font-family: Helvetica;
  background-color: #20262e;
}

.container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 30px 1fr;
  grid-template-areas: "discovery-list"
                       "drag-handle"
                       "sharing-list";
  background-color: #fff;
  border: 1px solid #000;
  width: 100%;
  min-width: 400px;
  height: 450px;
}

@media only screen and (min-width: 500px) {
  .container {
    grid-template-columns: 1fr 30px 1fr;
    grid-template-areas: "discovery-list drag-handle sharing-list";
    grid-template-rows: 100%;
  }

  .drag-handle {
    grid-template-columns: 100%; /* why it does not go vertically? */
    grid-template-rows: 30px 30px auto 30px;
    grid-auto-flow: column;
    grid-template-areas: "cancel"
                         "trash"
                         "title"
                         "share-button";
  }
}

.discovery-list {
  grid-area: discovery-list;
  padding: 5px;
  background-color: maroon;
  color: white;
}

.drag-handle {
  grid-area: drag-handle;
  display: grid;
  grid-template-columns: 80px 80px auto 80px;
  grid-template-rows: 30px;
  grid-template-areas: "cancel trash title share-button";
  line-height: 30px;
  padding: 0 5px;
  box-sizing: border-box;
  width: 100%;
  height: 30px;
  background-color: #ccc;
  font-weight: bold;

  &.cancel {
    grid-area: cancel;
  }
  &.trash {
    grid-area: trash;
  }
  &.title {
    grid-area: title;
  }
  &.share-button {
    grid-area: share-button;
  }
}



.sharing-list {
  grid-area: sharing-list;
  color: white;
  padding: 5px;
  background-color: blue;
}

我的代码也在 this jsfiddle: https://jsfiddle.net/w6jw0sLj/ 中。感谢您的帮助！

Answer 1

尝试使用 vh 而不是 % 长度。

body {
  padding: 20px;
  font-family: Helvetica;
  background-color: #20262e;
}

.container {
  height: 100vh;           /* NEW */
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 30px 1fr;
  grid-template-areas: "discovery-list"
                       "drag-handle"
                       "sharing-list";
  background-color: #fff;
  border: 1px solid #000;
  width: 100%;
  min-width: 400px;
  /* height: 450px; REMOVE */
}

@media only screen and (min-width: 500px) {
  .container {
    grid-template-columns: 1fr 30px 1fr;
    grid-template-areas: "discovery-list drag-handle sharing-list";
    grid-template-rows: 100vh; /* ADJUSTMENT */
  }
  
  .drag-handle {
    grid-template-columns: 1fr; /* why it does not go vertically? */
    grid-template-rows: 30px 30px auto 30px;
    grid-auto-flow: column;
    grid-template-areas: "cancel"
                         "trash"
                         "title"
                         "share-button";
  }
}

.discovery-list {
  grid-area: discovery-list;
  padding: 5px;
  background-color: maroon;
  color: white;
}

.drag-handle {
  grid-area: drag-handle;
  display: grid;
  grid-template-columns: 80px 80px auto 80px;
  grid-template-rows: 30px;
  grid-template-areas: "cancel trash title share-button";
  line-height: 30px;
  padding: 0 5px;
  box-sizing: border-box;
  width: 100%;
  height: 30px;
  background-color: #ccc;
  
  &.cancel {
    grid-area: cancel;
  }
  &.trash {
    grid-area: trash;
  }
  &.title {
    grid-area: title;
  }
  &.share-button {
    grid-area: share-button;
  }
}



.sharing-list {
  grid-area: sharing-list;
  color: white;
  padding: 5px;
  background-color: blue;
}

<div class="container">
  <div class="discovery-list">
    Discovery here
  </div>
  <div class="drag-handle">
    <div class="cancel">
      X
    </div>
    <div class="trash">
      xx
    </div>
    <div class="title">
      Title here
    </div>
    <div class="share-button">
      Share
    </div>
  </div>
  <div class="sharing-list">
    sharing list
  </div>
</div>

Answer 2

请参阅随附的代码片段。解决方案是添加一个额外的网格来处理 "drag-handle"。该网格包含 4 个文本区域。通过这样做，您可以获得 "drag-handle" 中的文本区域响应。

.discovery-list {
  grid-area: discovery-list;
  background-color: darkred;
  color: white;
  padding: 10px 0px 0px 10px;
  font-size: 125%;
}

.drag-handle {
  grid-area: drag-handle;
  background-color: grey;
}

.sharing-list {
  grid-area: sharing-list;
  background-color: darkblue;
  color: white;
  padding: 10px 0px 0px 10px;
  font-size: 125%;
}

@media only screen and (max-width: 599px) {

.wrapper {
  display: grid;
  grid-template-columns:
  1fr
  ;
  grid-template-rows:
  300px
  50px
  200px
  ;
  grid-template-areas:
  "discovery-list"
  "drag-handle"
  "sharing-list"
  ;
  }

  .drag-handle {
    display: grid;
    grid-template-columns:
    1fr
    1fr
    1fr
    1fr
    ;
    grid-template-rows:
    50px
    ;
    grid-template-areas:
    "text-area-1 text-area-2 text-area-3 text-area-4"
    ;
  }
}

@media only screen and (min-width: 600px) {

  .wrapper {
    display: grid;
    grid-template-columns:
    1fr
    1fr
    1fr
    ;
    grid-template-rows:
    300px
    ;
    grid-template-areas:
    "discovery-list drag-handle sharing-list"
    ;
  }

  .drag-handle {
    display: grid;
    grid-template-columns:
    1fr
    ;
    grid-template-rows:
    50px
    50px
    50px
    50px
    ;
    grid-template-areas:
    "text-area-1"
    "text-area-2"
    "text-area-3"
    "text-area-4"
    ;
  }
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="index.css">
</head>
<body>

<div class="wrapper">

<div class="discovery-list">Discovery here</div>

<div class="drag-handle">
  <div class="text-area-1">X</div>
  <div class="text-area-2">xx</div>
  <div class="text-area-3">Title here</div>
  <div class="text-area-4">Share</div>  
</div>

<div class="sharing-list">sharing list</div>

</div>

<script src="index.jsx">
</script>
</body>
</html>

css 网格无法填充中间列 100% vh

css grid unable to fill middle column 100% vh

html

css

layout

css-grid