我正在尝试用css创建一个网格。第一个元素有一个固定的高度,这导致整个第一行有相同的高度。我希望第二行的元素向上推,并填补第一行的空白。有没有办法用css网格实现这一点?x1c 0d1x
我打算使用这个页面将有元素,将根据用户提交的大小变化。
我试过将grid-auto-columns和grid-auto-rows与grid-auto-flow沿着使用:密集,但我不能得到任何组合这些得到想要的结果。任何建议赞赏。
.container {
display: grid;
width: 800px;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-gap: 1rem;
}
/* OTHER STYLES */
body {
background-color: #3b404e;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.item {
height: 100px;
background-color: #1EAAFC;
background-image: linear-gradient(130deg, #6C52D9 0%, #1EAAFC 85%, #3EDFD7 100%);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
color: #fff;
border-radius: 4px;
border: 6px solid #171717;
}
.item1 {
height: 250px;
}
<div class="container">
<div class="item item1"></div>
<div class="item item2"></div>
<div class="item item3"></div>
<div class="item item4"></div>
<div class="item item5"></div>
</div>
下面是我正在练习的代码:codepen
3条答案
按热度按时间kzipqqlq1#
这很简单,只需添加:
虽然很明显我选择了添加一个CSS类到您想要获得焦点的元素,为了做到这一点:
x一个一个一个一个x一个一个二个x
JS Fiddle demo .
当然,上述内容可以在不添加类名和简单地指定
:nth-child()
元素的情况下实现:JS Fiddle demo .
参考文献:
grid-row
.hrysbysz2#
第一件事你不能只有两行。网格给出了一个结构。
有3行,这是可能的
这是使用每个项目的网格区域位置执行此操作的一种方法
也可以对span执行相同的操作
nimxete23#
另一个解决这个问题的方法是...