Search code examples
csscss-grid

Why first row of the grid has a double size?

The first row of my grid has a double row size. Why is this happening? How might it be possible to create an area which contains two columns and one row of the normal size?

Picture Link

Video displaying the problem: https://youtu.be/ahfjeJXz-nY

Using these styles:

.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;
}
Solution

  • Because the first row contains at least one element that increases the size of it and then increases the size of the whole row. If all items were empty, they would all be the same size.