我的网格的第一行具有双行大小。为什么会这样呢?如何创建一个包含两列和正常大小的一行的区域?
我有一个视频。它显示了我的问题: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;
}
因为第一行包含至少一个增加其大小的元素,然后增加整个行的大小。如果所有项目均为空,则它们的大小都相同。
当在轨迹值之间留出空白时,将自动为网格线分配正数和负数
.container {
grid-template-columns: 40px 50px auto 50px 40px;
`grid-template-rows: 25% 100px auto;`
}