CSS Grid 1 top 3 bottom

CSS Grid 1 top 3 bottom

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>

CSS Grid 1 top 3 bottom

Leave a Reply

Your email address will not be published. Required fields are marked *