layout fragment

Good day. I ask for help in the implementation of this fragment of the layout. I did it by breaking into two lists, but I would like a better way to solve this problem. I will attach my decision here

.listWorks { width: 50%; float: left; margin-top: 99px; } .listWorks li { display: inline-block; float: left; } .listWorks li:not(.workLong), .listWorks a:not(.workLongLink) { max-height: 390px; } .workLong, .workLongLink { max-height: 780px; } 
 <ul class="listWorks"> <li> <a href="#" class="hoverImg"> <img src="img/work-photo1.jpeg" alt=""> </a> </li> <li> <a href="#" class="hoverImg"> <img src="img/work-photo2.jpeg" alt=""> </a> </li> <li> <a href="#" class="hoverImg"> <img src="img/work-photo5.jpeg" alt=""> </a> </li> <li> <a href="#" class="hoverImg"> <img src="img/work-photo6.jpeg" alt=""> <span class="linkCaption montReg">creatively designed <span>Lorem ipsum dolor sit</span></span> </a> </li> </ul> <ul class="listWorks"> <li class="workLong"> <a href="#" class="hoverImg workLongLink"> <img src="img/work-photo3.jpeg" alt=""> </a> </li> <li> <a href="#" class="hoverImg"> <img src="img/work-photo4.jpeg" alt=""> </a> </li> <li> <a href="#" class="hoverImg"> <img src="img/work-photo7.jpeg" alt=""> </a> </li> </ul>

1 answer 1

Support is of course bad but see:

But still Grid has grid-temlate-areas on which here such grids as you generally have it .. but read yandex or google and use it but not intrusively since the support is not very good for Grid

 .items { display: grid; grid-template-columns: 200px 200px 180px 250px; grid-template-rows: 200px 200px 250px 200px; font-size: 1.6em; font-variant: small-caps; } .item1 { background: red; } .item2 { background: blue; } .item3 { background: pink; } .item4 { background: yellow; } .item5 { background: tomato; } .item6 { background: grey; } .item7 { background: violet; } .item3 { grid-column: 3/3; grid-row: 1/3; } 
 <div class="items"> <div class="item1">item1</div> <div class="item2">item2</div> <div class="item3">item3</div> <div class="item4">item4</div> <div class="item5">item5</div> <div class="item6">item6</div> <div class="item7">item7</div> </div>

look at the whole screen