Сетка CSS не может заполнить средний столбец 100% VH

Question

Я создаю макет с помощью CSS-сетки, где у меня есть три области сетки с именами discovery-list, drag-handle и sharing-list.Мне нужно настроить макет в соответствии с шириной / размером экрана.Когда ширина экрана меньше 500 пикселей, я хочу расположить эти три области по вертикали:

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

Если экран больше 500 пикселей в ширину, я хочу разместить их горизонтально:

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;
}

Мой код также находится в это jsfiddle: https://jsfiddle.net/w6jw0sLj/. спасибо за помощь!

Answer 1

См. Прикрепленный фрагмент кода. Решение сделано путем добавления дополнительной сетки, которая заботится о «перетаскивании». Эта сетка содержит 4 области текста. Делая это так, вы можете сделать так, чтобы текстовые области реагировали на «перетаскивание».

.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>

Answer 2

Попробуйте использовать 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>