为什么网格的第一行具有双倍大小?

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

我的网格的第一行具有双行大小。为什么会这样呢?如何创建一个包含两列和正常大小的一行的区域?

Link to the picture

我有一个视频。它显示了我的问题:https://youtu.be/ahfjeJXz-nY

我正在使用这种样式:

.gallery {
    margin: 0px 16px;
    display: grid;
    grid-template-columns: repeat(4, 10fr);
    grid-gap: 27px;
    grid-template-areas: 'normal normal . .';
}
.item {
    background-color: #f0f0f0;
    width: 100%;
    padding-top: 100%;
    background-size: cover;
}
css css-grid
2个回答
0
投票

因为第一行包含至少一个增加其大小的元素,然后增加整个行的大小。如果所有项目均为空,则它们的大小都相同。


0
投票

当在轨迹值之间留出空白时,将自动为网格线分配正数和负数

.container {
      grid-template-columns: 40px 50px auto 50px 40px;
      `grid-template-rows: 25% 100px auto;`
}
© www.soinside.com 2019 - 2024. All rights reserved.