Photogallery: Grid

HTML/CSS
1

Hello!

So Im trying to make an easy, none fancy photogallery on my webpage. Im trying to use grid for the first time, but I can`t quite get the hang of it.

Tried to look for a solution on the internet, but I don`t get it the way I want.

Skjermbilde 2023-01-10 kl. 20.57.30
Skjermbilde 2023-01-10 kl. 20.57.30804Ă—936 90.4 KB

The white spots is images, and the red spot is an open field.
The picture above the red spot, is taking up the whole area below, and I dont know why. Since my images is of a different sizes, this look is what I want (some pictures are vertical, some horizontal)

How do I do this? Code below:

<div class="container">
      <div class="bilder">
        <a target="_blank" href="Images/bilder_komus/komus_lepsøy.jpeg">
          <img src="Images/bilder_komus/komus_lepsøy.jpeg" alt="Forest" />
        </a>

        <a target="_blank" href="Images/bilder_komus/komus_devold.jpeg">
          <img src="Images/bilder_komus/komus_devold.jpeg" alt="Forest" />
        </a>

        <a target="_blank" href="Images/bilder_komus/komus_parken.jpeg">
          <img src="Images/bilder_komus/komus_parken.jpeg" alt="Forest" />
        </a>
        <a target="_blank" href="Images/bilder_komus/komus_devold-2.jpeg">
          <img src="Images/bilder_komus/komus_devold-2.jpeg" alt="Forest"
        /></a>

        <a target="_blank" href="Images/bilder_komus/komus_lepsøy-2.JPG">
          <img src="Images/bilder_komus/komus_lepsøy-2.JPG" alt="Forest" />
        </a>

        <a target="_blank" href="Images/bilder_komus/komus_lepsøy-3.JPG">
          <img src="Images/bilder_komus/komus_lepsøy-3.JPG" alt="Forest" />
        </a>
        <a target="_blank" href="Images/bilder_komus/komus_lepsøy-4.JPG">
          <img src="Images/bilder_komus/komus_lepsøy-4.JPG" alt="Forest" />
        </a>

        <a target="_blank" href="Images/bilder_komus/terje_bruvik.JPG">
          <img src="Images/bilder_komus/terje_bruvik.JPG" alt="Forest" />
        </a>

        <a target="_blank" href="Images/bilder_komus/Laffenjul.jpeg">
          <img src="Images/bilder_komus/Laffenjul.jpeg" alt="Forest" />
        </a>
      </div>
    </div>
type or paste code here

CSS:

.bilder {
  display: grid;
  grid-template-columns: auto auto;
  gap: 10px;
  width: 50%;
}
type or paste code here
2

Hello,

Attached is a example, similar to your layout. The main part you are probably looking for is the align-self:center rule for the placeholder element. Hope it helps you out.

1 Like
3

Thanks, Townsend!

I´ll look into this!

4

where is grid-template-rows property?