The difference with this (partially duplicate) question is that I don't use align-items: center, I use start. If I use display: flex on grid-item and object-fit: contain/cover/fill on image it doesn't solve the problem.
My task is to create this grid:
.
In order to do it I use css grid and grid-template-areas.
In result, I have unexpected empty space inside some rows. Are there some rules that can deal with it? Or maybe html structure should be fixed?
.masttech-gallery__list {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(5, auto);
grid-gap: 40px;
grid-template-areas:
"pic1 pic2 pic2 pic3"
"pic1 pic2 pic2 pic6"
"pic4 pic2 pic2 pic6"
"pic4 pic5 pic5 pic6"
"pic7 pic5 pic5 pic6";
align-items: start;
list-style: none;
}
.masttech-gallery__item img {
width: 100%;
height: auto;
}<article class="masttech-gallery js-gallery js-block">
<ul class="masttech-gallery__list">
<li class="masttech-gallery__item" style="grid-area: pic1; margin-left: calc(-1 * 100% - 40px);">
<img src="https://via.placeholder.com/1000x2292">
</li>
<li class="masttech-gallery__item" style="grid-area: pic2;">
<img src="https://via.placeholder.com/1000x3564">
</li>
<li class="masttech-gallery__item" style="grid-area: pic3; margin-right: calc(-1 * 100% - 40px);">
<img src="https://via.placeholder.com/1000x2084">
</li>
<li class="masttech-gallery__item" style="grid-area: pic4; margin-left: calc(-1 * 100% - 40px);">
<img src="https://via.placeholder.com/1000x1750">
</li>
<li class="masttech-gallery__item" style="grid-area: pic5;">
<img src="https://via.placeholder.com/1000x2188">
</li>
<li class="masttech-gallery__item" style="grid-area: pic6; margin-right: calc(-1 * 100% - 40px);">
<img src="https://via.placeholder.com/1000x2526">
</li>
<li class="masttech-gallery__item" style="grid-area: pic7; margin-left: calc(-1 * 100% - 40px);">
<img src="https://via.placeholder.com/1000x1064">
</li>
</ul>
</article>The solution.
Just fix grid-template-rows to min-content min-content min-content 1fr 4fr.
