你能帮我让这个网格布局工作吗?列长度相等,但一列可以任意长

问题描述 投票:0回答:1

有人可以帮我用 CSS Grid 设计这个布局吗?

理论上红框应该可以想多长就多长。绿色盒子应保持相互堆叠。

红色框和绿色框的宽度应该相同,即 1/2。

Example

我尝试过使用网格和行,这真是令人头疼。如有任何帮助,我们将不胜感激!

css css-grid
1个回答
0
投票

技巧是告诉 1 号框跨越三个网格行。

.layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  font-size: 3em;
  font-weight: bold;
  gap: 1rem;
}

.layout>* {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem;
}

.layout>*:nth-child(1) {
  border: 3px solid red;
  color: red;
  grid-row: 1 / span 3;
}

.layout>*:nth-child(2), .layout>*:nth-child(3) {
  border: 3px solid green;
  color: green;
}
<div class="layout">
  <div>1<br><br>1<br><br>1<br><br>1</div>
  <div>2</div>
  <div>3</div>
</div>

© www.soinside.com 2019 - 2024. All rights reserved.