Search code examples
csscss-gridgalleryphoto

CSS Grid 1 top 3 bottom

im trying to make a photo grid which shows 1 image on top and 3 separate images on the bottom.

enter image description here

Anyone know how?

Solution

  • You can read more about CSS GRID on this tutorial.

    You can use a grid generator like this to make it easily.

    Note that I putted a red solid 5px border to each div, so it is more visible.

    You can put your img src="Your url", to show your image

    .grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 0px 0px;
  grid-template-areas:
    "main-photo main-photo main-photo"
    "main-photo main-photo main-photo"
    "photo1 photo2 photo3";
}

div{
border:5px solid red;
}

.main-photo { grid-area: main-photo; }
.photo1 { grid-area: photo1; }
.photo2 { grid-area: photo2; }
.photo3 { grid-area: photo3; }
    <div class="grid-container">
  <div class="main-photo"><img src=""></img></div>
  <div class="photo1"><img src=""></img></div>
  <div class="photo2"><img src=""></img></div>
  <div class="photo3"><img src=""></img></div>
</div>