时间戳

首页 > 解决方案 > 网格项展开以跟随列之间的偏移

html - 网格项展开以跟随列之间的偏移

问题描述

我正在尝试制作一个 html/css 卡片系统，它会自动将自己放置在 css 网格上。这个 CSS 网格分为两列。在左列中，一个 div 为该列的其余部分添加了一个偏移量，并且没有固定大小。我想在两列之间保持这个偏移量。

问题是左边的第一张卡片（数字 2）会增长以补偿偏移量，但所有卡片必须具有相同的大小。在不固定每张卡的大小的情况下如何解决这个问题？

我想做的事：

所需布局

我目前拥有的：

错误的布局

重现它的简单代码示例：

.grid {
  display: grid;
  background-color: #eee;
  grid-gap: 5px 5px;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-flow: dense;
}

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 60px;
  font-size: 150%;
}

.grid__1 {
  background-color: #ccc;
  grid-column: 1 / 2;
  padding: 5px;
  font-size: 1rem;
}

.grid__item {
  grid-column: span 1;
  grid-row: span 2;
}
<div class="grid">
  <div class="box grid__1">head</div>
  <div class="box grid__item">1</div>
  <div class="box grid__item">2</div>
  <div class="box grid__item">3</div>
  <div class="box grid__item">4</div>
  <div class="box grid__item">5</div>
  <div class="box grid__item">6</div>
</div>

我在这里做了一个活生生的例子：https ://jsfiddle.net/rLpqt75d/3/

标签： htmlcsscss-grid

解决方案

为属性 grid-auto-rows 定义一对行，这将设置正确的大小：

.grid {
  display: grid;
  background-color: #eee;
  grid-gap: 5px 5px;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-flow: dense;
  
  grid-auto-rows: 40px 200px; /* added */
}
.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 60px;
  font-size: 150%;
}
.grid__1 {
  background-color: #ccc;
  grid-column: 1 / 2;
  padding: 5px;
  font-size: 1rem;
}

.grid__item {
  grid-column: span 1;
  grid-row: span 2;
}
<div class="grid">
  <div class="box grid__1">head</div>
  <div class="box grid__item">1</div>
  <div class="box grid__item">2</div>
  <div class="box grid__item">3</div>
  <div class="box grid__item">4</div>
  <div class="box grid__item">5</div>
  <div class="box grid__item">6</div>
</div>

推荐阅读