在动态高度网格中将行调整为内容高度

Question

我想用CSS网格布局创建一个网页。

我正面临有关行高的问题。

我希望每行的高度根据内容进行调整。

现在身高是静止的。如果没有内容，则显示大量可用空间。有办法解决这个问题吗？

我想在这些屏幕截图中显示结果：

也

＆＃13;

＆＃13;

body,
html {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: arial;
}

.wrapper {
  height: 100%;
  display: grid;
  grid-template-rows: 40px auto 40px;
  grid-template-areas: "header  header  header" "content content content" "footer  footer  footer";
  grid-gap: 5px;
}

header {
  grid-area: header;
  background-color: black;
  color: white;
  padding: 10px;
}

footer {
  grid-area: footer;
  background-color: black;
  color: white;
  padding: 10px;
}

.container {
  grid-area: content;
  display: grid;
  grid-template-columns: 820px 1fr;
  grid-template-rows: 480px 213px;
  grid-gap: 5px;
  padding: 0 5px;
}

.grid-item-1 {
  color: #fff;
  text-align: center;
  padding: 10px;
  background-color: #009036;
  grid-area: 1 / span 1 / 1 / span 1;
}

.grid-item-2 {
  color: #fff;
  text-align: center;
  padding: 10px;
  background-color: #772164;
  grid-area: 2 / span 1 / 2 / span 1;
}

.grid-item-3 {
  color: #fff;
  text-align: center;
  background-color: #C91B18;
  grid-area: 1 / 2 / span 3 / span 3;
}

＆＃13;

<section class="wrapper">
  <header>Header</header>
  <div class="container">
    <div class="grid-item-1">This row height fit according data. <br><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
      ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    <div class="grid-item-2">
      This row height fit according data. <br><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
      ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    <div class="grid-item-3">3</div>
  </div>
  <footer>Footer</footer>
</section>

＆＃13;

＆＃13;

＆＃13;

Answer 1

对于这两个内容项，请为每行使用min-content。这会根据"shrink-to-fit" algorithm确定每一行的大小。

要为正确的列提供全高，请添加一个空的implicit row。

＆＃13;

＆＃13;

body {
  margin: 0; font-family: arial;
}
* { box-sizing: border-box; }

.wrapper {
  height: 100vh;
  display: grid;
  grid-template-rows: 40px 1fr 40px;
  grid-gap: 5px;  
  grid-template-areas: "header  header  header" 
                       "content content content"
                       "footer  footer  footer";

}

header {
  grid-area: header;
  background-color: black;
  color: white;
  padding: 10px;
}

footer {
  grid-area: footer;
  background-color: black;
  color: white;
  padding: 10px;
}

.container {
  grid-area: content;
  display: grid;
  grid-template-columns: 820px 1fr;
  grid-template-rows: min-content min-content; /* shrink-to-fit */
  grid-gap: 5px;
  padding: 0 5px;
  grid-template-areas: "green red" 
                       "purple red"
                       "   .    red"; /* implicit row; for red's full height */

}

.grid-item-1 {
  grid-area: green;
  color: #fff;
  text-align: center;
  padding: 10px;
  background-color: #009036;
}

.grid-item-2 {
  grid-area: purple;
  color: #fff;
  text-align: center;
  padding: 10px;
  background-color: #772164;
}

.grid-item-3 {
  grid-area: red;
  color: #fff;
  text-align: center;
  background-color: #C91B18;
}

＆＃13;

<section class="wrapper">
  <header>Header</header>
  <div class="container">
    <div class="grid-item-1">This row height fit according data.
      <br>
      <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    <div class="grid-item-2">
      This row height fit according data.
      <br>
      <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    <div class="grid-item-3">3</div>
  </div>
  <footer>Footer</footer>
</section>

＆＃13;

＆＃13;

＆＃13;