# Photogallery: Grid

**URL:** <https://forum.codewithmosh.com/t/photogallery-grid/17590>\
**Category:** HTML/CSS\
**Created:** [January 10, 2023, 8:08pm UTC](https://forum.codewithmosh.com/t/photogallery-grid/17590 "2023-01-10T20:08:23Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Ludvig](https://avatars.discourse-cdn.com/v4/letter/l/ebca7d/32.png) [@Ludvig](https://forum.codewithmosh.com/u/Ludvig)\
**Post date:** [January 10, 2023, 8:08pm UTC](https://forum.codewithmosh.com/t/photogallery-grid/17590/1 "2023-01-10T20:08:24Z")

</div>

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](https://us1.discourse-cdn.com/flex020/uploads/codewithmosh/original/2X/3/348cb31f9a8f3dc9786a11ef8d4bf906b16f8d2c.png)

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:

```auto
<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:

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

```

---

<div class="post-metadata">

**Author:** ![MTownsend](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.codewithmosh.com/mtownsend/32/6311_2.png) [@MTownsend](https://forum.codewithmosh.com/u/MTownsend)\
**Post date:** [January 10, 2023, 9:16pm UTC](https://forum.codewithmosh.com/t/photogallery-grid/17590/2 "2023-01-10T21:16:38Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Ludvig](https://avatars.discourse-cdn.com/v4/letter/l/ebca7d/32.png) [@Ludvig](https://forum.codewithmosh.com/u/Ludvig)\
**Post date:** [January 11, 2023, 6:39pm UTC](https://forum.codewithmosh.com/t/photogallery-grid/17590/3 "2023-01-11T18:39:26Z")

</div>

Thanks, Townsend!

I´ll look into this!

---

<div class="post-metadata">

**Author:** ![AzharUddinSheikh](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.codewithmosh.com/azharuddinsheikh/32/5561_2.png) [@AzharUddinSheikh](https://forum.codewithmosh.com/u/AzharUddinSheikh)\
**Post date:** [February 15, 2023, 3:07pm UTC](https://forum.codewithmosh.com/t/photogallery-grid/17590/4 "2023-02-15T15:07:06Z")

</div>

> [@Ludvig](#):
>
> ```auto
> .bilder {
> display: grid;
> grid-template-columns: auto auto;
> gap: 10px;
> width: 50%;
> }
> 
> ```

where is `grid-template-rows` property?