I am facing a challenge creating a responsive CSS grid image gallery with 18 divs inside a container in my HTML code. Each div has its own unique class. My first issue arises when I attempt to span the first image horizontally using a class called .vertical. Although I've applied "grid-column: span 2;" in my CSS, the image expands both vertically and horizontally instead of just horizontally. Moving on to the second problem, when I implement "grid-row:span 2;" for the .vertical class image, the lower image shifts up but the vertical spanning doesn't occur as intended. Below is my code snippet. Any advice or assistance would be greatly appreciated.
img{
width:100%;
height:auto;
}
.container{
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
grid-gap: 5px;
}
.horizontal{
grid-column:span 2;
}
.vertical{
grid-row:span 2;
}<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="container">
<div class="horizontal"><img src="christian.jpg"></div>
<div class="vertical"><img src="1.jpg"></div>
<div class="tva"><img src="2.jpg"></div>
<div class="tre"><img src="3.jpg"></div>
<div class="fyra"><img src="4.jpg"></div>
<div class="fem"><img src="5.jpg"></div>
<div class="sex"><img src="6.jpg"></div>
<div class="sju"><img src="7.jpg"></div>
<div class="vertical"><img src="christian.jpg"></div>
<div class="ett"><img src="1.jpg"></div>
<div class="tva"><img src="2.jpg"></div>
<div class="tre"><img src="3.jpg"></div>
<div class="fyra"><img src="4.jpg"></div>
<div class="fem"><img src="5.jpg"></div>
<div class="sex"><img src="6.jpg"></div>
<div class="sju"><img src="7.jpg"></div>
<div class="sex"><img src="6.jpg"></div>
<div class="sju"><img src="7.jpg"></div>
</div>
</body>
</html>