如何使用✕和Css生成3 3网格

Question

我有20个元素作为网格视图。但是我只想要3个✕3网格视图，其中视图窗口中只有9个元素。元素的其余部分应作为可滚动资产放置在窗口的右侧。

无论屏幕大小如何，我只想显示网格中的前9个元素。

​

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  grid-gap: 5px;
}

.card {
  background-color: dodgerblue;
  color: white;
  padding: 1rem;
  height: 4rem;
}

<div class="cards">
  <div class="card">ONE</div>
  <div class="card">TWO</div>
  <div class="card">THREE</div>
  <div class="card">FOUR</div>
  <div class="card">FIVE</div>
  <div class="card">SIX</div>
  <div class="card">SEVEN</div>
  <div class="card">EIGHT</div>
  <div class="card">NINE</div>
  <div class="card">TEN</div>
  <div class="card">ELEVEN</div>
  <div class="card">TWELVE</div>
</div>

​

Answer 1

在这种情况下，网格应该垂直流动。你可以像这样做，计算一下：

​

.cards {
  /* how many columns on the first screen */
  --cols: 3;
  
  /* how many rows on the first screen */
  --rows: 3;
  
  /* grid gap */
  --gap: 5px;
  
  --width: calc((100% - var(--gap) * (var(--cols) - 1)) / var(--cols));
  display: grid;
  position: relative;
  grid-auto-flow: column dense;
  grid-template-rows: repeat(var(--rows), 1fr);
  grid-auto-columns: var(--width);
  grid-gap: var(--gap);
  overflow-x: auto;
}

.card {
  background-color: dodgerblue;
  color: white;
  padding: 1rem;
  height: 4rem;
}

<div class="cards">
  <div class="card">ONE</div>
  <div class="card">TWO</div>
  <div class="card">THREE</div>
  <div class="card">FOUR</div>
  <div class="card">FIVE</div>
  <div class="card">SIX</div>
  <div class="card">SEVEN</div>
  <div class="card">EIGHT</div>
  <div class="card">NINE</div>
  <div class="card">TEN</div>
  <div class="card">ELEVEN</div>
  <div class="card">TWELVE</div>
  <div class="card">THIRTEEN</div>
  <div class="card">FOURTEEN</div>
</div>

​

Answer 2

.cards {
  display: grid;
  grid-template-columns: auto auto auto;
  background-color: #2196F3;
  padding: 10px;
}

.card {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}

<div class="cards">
  <div class="card">ONE</div>
  <div class="card">TWO</div>
  <div class="card">THREE</div>  
  <div class="card">FOUR</div>
  <div class="card">FIVE</div>
  <div class="card">SIX</div>  
  <div class="card">SEVEN</div>
  <div class="card">EIGHT</div>
  <div class="card">NINE</div>  
</div>

Answer 3

实现这一点的一个简单方法是在您的nth-child类上使用card CSS选择器。既然，你只想在集装箱里显示前9张卡，你就得从第10位开始隐藏这些卡片。

考虑一下:nth-child(an + b)。在这里，术语b是您可以指定给目标卡的偏移量。如果您删除a并将b的值替换为10，它将针对所有显示为10子或更高版本的卡。选择器将是这样的：:nth-child(n + 10)。这是一个相对可读的解决方案。

奖励提示：确保卡片显示为3x3网格，您可以显式地更新grid-template-columns CSS属性为repeat(3, 1fr)而不是repeat(auto-fill, minmax(150px, 1fr))

这是最后一个片段：

​

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 5px;
}

.card {
  background-color: dodgerblue;
  color: white;
  padding: 1rem;
  height: 4rem;
}

/* Hide card which occurs at 10th position and above */
.card:nth-child(n + 10) {
  display: none;
}

<div class="cards">
  <div class="card">ONE</div>
  <div class="card">TWO</div>
  <div class="card">THREE</div>
  <div class="card">FOUR</div>
  <div class="card">FIVE</div>
  <div class="card">SIX</div>
  <div class="card">SEVEN</div>
  <div class="card">EIGHT</div>
  <div class="card">NINE</div>
  <div class="card">TEN</div>
  <div class="card">ELEVEN</div>
  <div class="card">TWELVE</div>
</div>

​