html - 元素未包装在 CSS 网格中

Question

大家好,

Web 开发的新手，我正在尝试学习如何使用漂亮的 css 网格工具，但实际上我受困于此:

我希望我的卡片在下一行中一张一张地自动排列(使用相同的列模板)，但实际上我在浏览器中只看到一张卡片。

我认为问题出在 vh 中的 .wrapper 高度。我尝试了 px 和 %，但我真的很难找到解决方案。

如果有人对这个问题有任何想法，或者对我的(坏...或好？)编码方式有任何评论，我将不胜感激!

/* Just some horrible stylization to better see boxes */

body {
  padding: 0px;
  margin: 0px;
}

div {
  background-color: #f1c40f;
  border: 1px solid white;
}

/* Definition of the 3 grids used*/

.wrapper {
  height: 100vh;
  box-sizing: border-box;
  display: grid;
  align-content: stretch;
  justify-content: stretch;
  grid-template-columns: 2fr 1fr 3fr 1fr 3fr 1fr 2fr;
  grid-template-rows: 1fr 5fr 1fr;
  grid-template-areas: "header header header header header header header"
                       "main main main main main main main"
                       "footer footer footer footer footer footer footer"
}

.main {
  grid-area: main;
  display: grid;
  grid-template-columns: 60px 7fr 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: "sidebar box-content box-content";
}

/* This box-content's grid-template-columns have many ones, it is done to modify
only the grid-template-areas with media-queries for larger screen*/

.box-content {
  grid-area: box-content;
  display: grid;
  grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr 1fr 2fr 1fr;
  grid-template-rows: 1fr 7fr 1fr;
  grid-auto-flow: row;
  grid-template-areas: ". . . . . . . . ."
                       ". card card card card card card card."
                       ". . . . . . . . .";
}

/* Definition of the different element's grid-area*/

.header {
  grid-area: header;
}

.sidebar {
  grid-area: sidebar;
}


.card {
  grid-area: card;
}

.footer {
  grid-area: footer;
}

 <!-- I apologize for non-semantic tags, only a quick prototyping -->

  <div class="wrapper">
    <div class="header"> Header Header Header Header Header</div>
    <div class="main">
      <div class="sidebar">Sidebar Sidebar </div>
      <div class="box-content">
        <div class="card"> Card Card Card Card Card Card </div>
        <div class="card"> Card Card Card Card Card Card </div>
        <div class="card"> Card Card Card Card Card Card </div>
        <div class="card"> Card Card Card Card Card Card </div>
      </div>
    </div>
    <div class="footer"> Footer Footer Footer Footer Footer </div>
  </div>

谢谢

Answer 1

要让卡片逐行换行，请使用 auto-fit 和 minmax 函数。

这里有一个完整的解释:Getting columns to wrap in CSS Grid

这是一个基本演示:jsFiddle (调整浏览器宽度看效果)

这是演示代码:

.wrapper {
  height: 100vh;
  display: grid;
  align-content: stretch;
  justify-content: stretch;
  grid-template-columns: 2fr 1fr 3fr 1fr 3fr 1fr 2fr;
  grid-template-rows: 1fr 5fr 1fr;
  grid-template-areas: "header header header header header header header"
                       "main main main main main main main"
                       "footer footer footer footer footer footer footer"
}

.main {
  grid-area: main;
  display: grid;
  grid-template-columns: 60px 7fr 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: "sidebar box-content box-content";
}

.box-content {
  grid-area: box-content;
  align-items: start;
  align-content: start;
  display: grid;
  grid-gap: 10px;
  padding: 10px;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}

.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.footer { grid-area: footer; }


body {
  padding: 0px;
  margin: 0px;
}

div {
  background-color: #f1c40f;
  border: 1px solid white;
}
* { 
  box-sizing: border-box;
}

<div class="wrapper">
  <div class="header"> Header Header Header Header Header</div>
  <div class="main">
    <div class="sidebar">Sidebar Sidebar </div>
    <div class="box-content">
      <div class="card"> Card Card Card Card Card Card </div>
      <div class="card"> Card Card Card Card Card Card </div>
      <div class="card"> Card Card Card Card Card Card </div>
      <div class="card"> Card Card Card Card Card Card </div>
      <div class="card"> Card Card Card Card Card Card </div>
      <div class="card"> Card Card Card Card Card Card </div>
      <div class="card"> Card Card Card Card Card Card </div>
      <div class="card"> Card Card Card Card Card Card </div>      
    </div>
  </div>
  <div class="footer"> Footer Footer Footer Footer Footer </div>
</div>