The height of the grid items is giving me problems. I filled it with image and video. However, it appears that the grid items are considerably taller than their own content. I couldn't find a solution for that, such as how to have the grid items automatically resize to meet the height of their own images and videos. so that, it will be auto reponsive too.
Example - enter image description here
also, How can I fit the third rows a little bit higher so that they align with the complete portions and appear good? Thanks
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> View All </title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css">
<style>
.view_main{
padding-top: 20px;
padding-bottom: 20px;
}
.container{
height: 700px;
width: 1000px;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
row-gap: 16px;
column-gap: 16px;
}
.item1{
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 2;
background-color: aquamarine;
height: auto;
}
.item2{
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 3;
background-color: aquamarine;
max-height: fit-content;
}
.item3{
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 2;
background-color: aquamarine;
}
.item4{
grid-column-start: 4;
grid-column-end: 5;
grid-row-start: 1;
grid-row-end: 3;
background-color: aquamarine;
}
.item5{
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 2;
grid-row-end: 4;
background-color: aquamarine;
}
.item6{
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 3;
grid-row-end: 4;
background-color: aquamarine;
}
.item7{
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 2;
grid-row-end: 4;
background-color: aquamarine;
}
.item8{
grid-column-start: 4;
grid-column-end: 5;
grid-row-start: 3;
grid-row-end: 4;
background-color: aquamarine;
}
img{
border-radius: 10px;
}
video{
border-radius: 10px;
}
</style>
</head>
<body>
<Section class="view_main">
<div class="container">
<div class="item1">
<img style="max-height: fit-content; width: 100%;" src="./PartyBoyz.png" alt="">
</div>
<div class="item2">
<video style="max-height: fit-content; width: 100%;" autoplay loop muted>
<source src="./Canna Straws 720p.mp4">
</video>
</div>
<div class="item3">
<img style="max-height: fit-content; width: 100%;" src="./WEED MANDALA Logo.png" alt="">
</div>
<div class="item4">
<video style="max-height: fit-content; width: 100%;" autoplay loop muted>
<source src="./Heights Magic Apple 720p.mp4">
</video>
</div>
<div class="item5">
<video style="max-height: fit-content; width: 100%;" autoplay loop muted>
<source src="./Partyboyz Moonrocks 720p.mp4">
</video>
</div>
<div class="item6">
<img style="max-height: fit-content; width: 100%;" src="./Budariums Icon.png" alt="">
</div>
<div class="item7">
<video style="max-height: fit-content; width: 100%;" autoplay loop muted>
<source src="./Partyboyz Punch 720p.mp4">
</video>
</div>
<div class="item8">
<img style="max-height: fit-content; width: 100%;" src="./Pyro Packs Logo.png" alt="">
</div>
</div>
</Section>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
