4x3网格,两个项目双倍高度

Question

我正在尝试创建4x3网格,两个项目双倍高度.

.grida {
	width:540px;
	display: grid;
	row-gap: 14px;
	grid-template-columns: repeat(4, 120px);
	justify-content:space-evenly;
	align-content: space-evenly;
	background-color: #fff;
	color: #444;
}

.card {
	background-color: #ddd;
	color: #555;
	border-radius: 5px;
	padding: 5px;
	font-size: 150%;
	height:68px;
}

.a {
	grid-row: auto / span 2;
}

.g {
	grid-row: auto / span 2;
}

<div class='grida'>
  <div class="card a">A</div>
  <div class="card b">B</div>
  <div class="card c">C</div>
  <div class="card d">D</div>
  <div class="card e">E</div>
  <div class="card f">F</div>
  <div class="card g">G</div>
  <div class="card h">H</div>
  <div class="card i">I</div>
  <div class="card j">J</div>
</div>

为什么有空块？
我想要a和g双倍高度.
有帮助吗？

Answer 1

grid-row因为你在carddiv 上设置一个高度,所以不起作用.为了调整carddiv 的"高度" ,我使用填充做了一个技巧.做这个:

.grida {
	width:540px;
	display: grid;
	row-gap: 14px;
	grid-template-columns: repeat(4, 120px);
	justify-content:space-evenly;
	align-content: space-evenly;
	background-color: #fff;
	color: #444;
}

.card {
	background-color: #ddd;
	color: #555;
	border-radius: 5px;
	font-size: 150%;
	padding: 30px 5px
}

.a, .g {
	grid-row: auto / span 2 !important;
}

<div class='grida'>
  <div class="card a">A</div>
  <div class="card b">B</div>
  <div class="card c">C</div>
  <div class="card d">D</div>
  <div class="card e">E</div>
  <div class="card f">F</div>
  <div class="card g">G</div>
  <div class="card h">H</div>
  <div class="card i">I</div>
  <div class="card j">J</div>
</div>