CSS Grid Layout

I’m in the initial phase of developing a photo gallery using CSS Grid layout. This includes an opening page of thumbnails that open larger individual photos on click. All of the .jpg files are located in an “images” subfolder in the same folder as the “index.html”. When I added the first thumbnail to link back to another page displaying multiple photos (using ‘href="…/’ to move one step back in my directory structure), everything still works but row 1/col 2 of my grid is left blank rather than be occupied by the next thumbnail. All of my thumbnails show up and function - there’s just a blank cell at row 1/col 2. Why?

(code in attached file)

forum.txt (3.2 KB)

Hi there! Please share your code properly:

1 Like

I’m in the initial phase of developing a photo gallery using CSS Grid layout. This includes an opening page of thumbnails that open larger individual photos on click. All of the .jpg files are located in an “images” subfolder in the same folder as the “index.html”. When I added the first thumbnail to link back to another page displaying multiple photos (using ‘href="…/’ to move one step back in my directory structure), everything still works but row 1/col 2 of my grid is left blank rather than be occupied by the next thumbnail. All of my thumbnails show up and function - there’s just a blank cell at row 1/col 2. Why?

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Photo Gallery 4</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="gallery">
    	<figure>
				<a target="_self" href="../PhotoGallery2/index.html">
    		<img src="./images/ZoeyIcon.png" alt="Zoey Icon" />
        <figcaption>Full Gallery</figcaption>
      </figure>
			<figure>
				<a target="_self" href="./images/ZoeyGorge.jpg">
      		<img src="./images/ZoeyGorge.jpg" alt="Zoey Columbia River Gorge" />
        	<figcaption>Columbia Gorge</figcaption>
        </a>
      </figure>
      <figure>
				<a target="_self" href="./images/ZoeySayulita.jpg">
      		<img src="./images/ZoeySayulita.jpg" alt="Zoey in Sayulita" />
        	<figcaption>Sayulita MX</figcaption>
        </a>
      </figure>
      <figure>
				<a target="_self" href="./images/ZoeyOBBH.jpg">
      		<img src="./images/ZoeyOBBH.jpg" alt="Zoey at the Oak Bay Beach Hotel" />
        	<figcaption>Queen of OBBH</figcaption>
        </a>
      </figure>
      <figure>
				<a target="_self" href="./images/ZoeySDT.jpg">
      		<img src="./images/ZoeySDT.jpg" alt="Zoey at the Lacamas Valley Sheep-dog Trials" />
        	<figcaption>Sheepdog Trials</figcaption>
        </a>
      </figure>
      <figure>
				<a target="_self" href="./images/ZoeyQueen.jpg">
      		<img src="./images/ZoeyQueen.jpg" alt="Zoey: Queen of All that She Surveys" />
        	<figcaption>All That She Surveys</figcaption>
      	</a>
      </figure>
      <figure>
				<a target="_self" href="./images/ZoeyHH.jpg">
      		<img src="./images/ZoeyHH.jpg" alt="Zoey Hip Hound Portrait" />
        	<figcaption>Portrait</figcaption>
        </a>
      </figure>
      <figure>
				<a target="_self" href="./images/ZoeyFamDamnly.jpg">
      		<img src="./images/ZoeyFamDamnly.jpg" alt="Zoey and Family" />
        	<figcaption>Family</figcaption>
        </a>
      </figure>
      <figure>
				<a target="_self" href="./images/ZoeyCute.jpg">
      		<img src="./images/ZoeyCute.jpg" alt="Zoey Cute" />
        	<figcaption>Too Cute</figcaption>
        </a>
      </figure>
      <figure>
				<a target="_self" href="./images/ZoeyBeach.jpg">
      		<img src="./images/ZoeyBeach.jpg" alt="Zoey Beach" />
        	<figcaption>At the Beach</figcaption>
        </a>
      </figure>
      <figure>
				<a target="_self" href="./images/ZoeyPNP.jpg">
      		<img src="./images/ZoeyPNP.jpg" alt="Zoey Point No Point" />
        	<figcaption>Point No Point</figcaption>
        	</a>	
    </div>  
  </body>
</html>

img {
	border: 1px solid #ddd;
	border-radius: 4px;
	padding: 5px;
	width: 150px;		
}

img:hover {
	box-shadow: 5px 5px 2px 1px rgba(0, 150, 150, 0.5);
}
	
figure {
	margin: 0;
}
	
figure figcaption {
	text-align: center;
}

figure a {
	text-decoration: none;
}
	
@media screen and (max-width: 1024px) {
	.gallery {
    grid-template-columns: repeat(5, 160px);
  }
}


@media screen and (max-width: 850px) {
	.gallery {
    grid-template-columns: repeat(4, 160px);
  }

@media screen and (max-width: 480px) {

	.gallery {
    grid-template-columns: 160px 160px;
  }
}

Thanks! Do you have this deployed somewhere, GitHub Pages, etc.? It’s impossible to look at the displaying of pictures located on your machine.

I tried to upload the images folder, and then the individual jpgs, to the forum - unsuccessfully. The images are just on my Mac (on iCloud). So new to this that I’m unfamiliar with GitHub - I’ll look into it. Looking at the html code in Chrome Developer Tools, I see an extra line of code under the first tag that is not there in my editor nor in the code I pasted above. The line () produces the blank row1/col2. I can delete that line in DevTools and the blank spot goes away and the page looks fine. DevTools does not allow me to save this edit - it’s only valid for the DevTools session - so when I refresh the blank spot is back. Don’t know why DevTools sees a line of code that’s not there in my editor.

The line is:

<a target="_self" href="../PhotoGallery2/index.html">

I’m now set up on GitHubPages

Nice, share the link so I can take a look

Thanks Ray! I’m feeling my way around GitHub and making progress. I’m laying out the directory structure utilized by this project. I want to do it right. I have to take a few days off but I’ll be back.

1 Like

Maybe I’ve set up my directory structure on GitHub. Don’t know how to send a link to allow you access.

So watch this video to learn how to deploy and share your link:
Starts at 5:28

1 Like

Sorry Ray - I tried several times to follow this guy’s video but he assumed I knew a lot more than I do. I did not end up with anything I could share with you.

Could I email you the files?

Hello again! No, there’s no way to send files like this, it will not benefit you at all. And this is not a solution for a web developer, of course.
The best way to you is to explain your issues, what you did and what’s confusing (screenshots are ok too), then I will try to help you.
Also, Git and GitHub are must have tools for any web dev, you can’t avoid the use of any version control system in your work, personal or commercial.

Thanks Ray,

Message received - I’ll work on getting more proficient at GitHub.

Here are a couple of screenshots. The first is my html code in the editor. The second is that code opened in the Chrome browser with the DevTools console displayed. Notice that the code displayed in the console includes an additional line (<a target=“_self” href="PGFull.html”>) that is not in my original code. This additional line generates the blank rectangle in row 1/col 2 that I don’t want.

So good luck with GitHub, as soon as you share the link to your deploy I can help you.
Screenshots are almost useless to help with code, but it will can help me understand your issues with GitHub.

I think it’s deployed at
https://townsendpdx.github.io/townsendpdx.gethub.io/
Sorry about the duplication in the names.

Yes, you did it, congrats!
Well, the blank cell issue. Actually, this is a duplicate of the link placed in your first figure element. You can simply delete this line of code without any doubt. I suppose you’ve added it accidentally.
On the screenshot below I turned this line into comment and you can see the result.

Image

P.S. Nice photos!

Ay, there’s the rub! See screen shot. I didn’t write that extra line of code so I don’t know how to delete it. That code line only appears (in the console) when my code is run.

Nope, this line exists in your code, so just remove it in your editor, use Backspace or smth like that.

Please look at the screen shot of my original code. There is only one line referencing href=“PGFull.html”. When my original code is run, the extra line referencing href=“PGFull.html” is somehow generated and shows up in the console as well as in the results (the blank row1/col2). It is not in my original code.