CSS: <img> ignoring grid-area, <p> does not

[Pegasus]

Hi all,

Images ignore the ‘grid-area’ property, regardless of assigned column / row. However the text displays correctly in whichever cell it is assigned.

I’ve attached two screenshots in one file to help explain.

In the 1st screenshot: image 4 (site-img–4) will not display below ‘newsite’, it just “flows” right into the next cell.

In the 2nd screenshot: Moved text ‘newsite’ from grid-area: ‘title–4’ to ‘title–6’. Now the image has moved left 1 cell, completely ignoring it’s assigned grid-area. (which should be on the 4th row. I’m stumped, any help is appreciated.

.grid-container {
	display: grid;
	grid-gap: 30px 50px;
  	grid-template-columns: 33.3% 33.3% 33.3%;
	grid-template-rows: 50px 200px 50px 200px 200px;
	grid-template-areas:
		"title--1 title--2 title--3"
		"image--1 image--2 image--3"
		"title--4 title--5 title--6"
		"image--4 image--5 image--6";
		
	justify-content: space-evenly;
	text-align: center;
	margin-left: 100px;
	margin-right: 100px;
}

/*------------------------------------------------*/
#site-title--1 {
	grid-area: title--1;
}

#site-title--2 {
	grid-area: title--2;
}

#site-title--3 {
	grid-area: title--3;
}

#site-title--4 {
	grid-area: title--4;
}

#site-img--1 {
	grid-area: image--1;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-style: solid;
	border-color: silver;
	border-radius: 5px;
	box-shadow: 0px 0px 10px 5px white;
}

#site-img--2 {
	grid-area: image--2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-style: solid;
	border-color: silver;
	border-radius: 5px;
	box-shadow: 0px 0px 10px 5px white;
}

#site-img--3 {
	grid-area: image--3;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-style: solid;
	border-color: silver;
	border-radius: 5px;
	box-shadow: 0px 0px 10px 5px white;
	
}

#site-img--4 {
	grid-area: image--4;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-style: solid;
	border-color: silver;
	border-radius: 5px;
	box-shadow: 0px 0px 10px 5px white;
}

HTML
<section class="projects">
				<h2>Websites</h2>
				<div class="grid-container">
					<p id="site-title--1">Tribute page</p>
					<a href="#"><img id="site-img--1" src="https://user-images.githubusercontent.com/80556233/169801095-11e4218d-9d3a-4e88-895e-4d705eb39af9.png" alt="screenshot of tribute_page website"></a>
					
					<p id="site-title--2">Survey form</p>
					<a href="#"><img id="site-img--2" src="https://user-images.githubusercontent.com/80556233/169801104-46bde4c5-5993-4847-93f5-54be9cc5889e.png" alt="screenshot of survey_form website."></a>
					
					<p id="site-title--3">Landing Page</p>
					<a href="#"><img id="site-img--3" src="https://user-images.githubusercontent.com/80556233/169801095-11e4218d-9d3a-4e88-895e-4d705eb39af9.png" alt="screenshot of tribute_page website"></a>

					<p id="site-title--4">newsite</p>
					<a href="#"><img id="site-img--4" src="https://user-images.githubusercontent.com/80556233/169801095-11e4218d-9d3a-4e88-895e-4d705eb39af9.png" alt="screenshot of tribute_page website"></a>
				</div>
			</section>

[Cryptic_X]

I completed the grid after that it works fine. You can give it a try

[Pegasus]

Thankyou for your time, your answer helped me figure it out.

So, the grid-template-area needs to be completed. To create an empty cell I did this:

grid-template-areas:
		"title--1 title--2 title--3"
		"image--1 image--2 image--3"
		"title--4 empty empty"
		"image--4 empty empty";

#empty-cell {
	grid-area: empty;
}

And then in html created a ‘div id=“empty-cell”’ (at the end of section):

<section class="projects">
				<h2>Websites</h2>
				<div class="grid-container">
					<p id="site-title--1">Tribute page</p>
					<a href="#"><img id="site-img--1" src="https://user-images.githubusercontent.com/80556233/169801095-11e4218d-9d3a-4e88-895e-4d705eb39af9.png" alt="screenshot of tribute_page website"></a>
					
					<p id="site-title--2">Survey form</p>
					<a href="#"><img id="site-img--2" src="https://user-images.githubusercontent.com/80556233/169801104-46bde4c5-5993-4847-93f5-54be9cc5889e.png" alt="screenshot of survey_form website."></a>
					
					<p id="site-title--3">Landing Page</p>
					<a href="#"><img id="site-img--3" src="https://user-images.githubusercontent.com/80556233/169801095-11e4218d-9d3a-4e88-895e-4d705eb39af9.png" alt="screenshot of tribute_page website"></a>
					
					<p id="site-title--4">newsite</p>
					<a href="#"><img id="site-img--4" src="https://user-images.githubusercontent.com/80556233/169801095-11e4218d-9d3a-4e88-895e-4d705eb39af9.png" alt="screenshot of tribute_page website"></a>
					<div id="empty-cell">
					</div>
				</div>
			</section>

Cryptic_X, I could kiss you.