Responsive Grid image View for 3 images

Question

I'm currently trying to create a site where i want to have 3 images shown.

Those 3 images are the same size but shall be shown like this:

|---------| |---------|
|         | |         |
|         | | image 2 |
|         | |         |
|         | |---------|
| image 1 | 
|         | |---------|
|         | |         |
|         | | image 3 |
|         | |         |
|---------| |---------|

I also want the site to be responsive to resizing the browser, so that the images stay in the same grid, but just get smaller or bigger.

What i already tried:

Using grid:

.gridcon {
    margin-left: 320px;
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: 960px 960px;
}

.gridcon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

With it, the images itself resize, but not the dimensions (meaning i get less of the picture shown, while still using the same area of the screen)

Using flexbox:

.main {
  margin-left: 320px; /* Same as the width of the sidenav */
  padding: 0px 0px;
  display: flex;
  align-content: flex-start;
  height: 100%;
}

.main .column1 {
    height: auto;
  padding: 0px 5px;
}

.main .column1 img {    
}

.main .column2 {
  padding: 0px 5px;
}

.main .column2 img {    
height: 50%;
    display: block;
  padding: 0px 0px;
  margin-top: 0px;
}

Well, i either can't get the wanted layout at all, or i can't get it to resize. Instead of resizing, the images jump into a new line.

user_2424775 · Answer

I'm not an expert on CSS Grid, but I think this could help you. Please try.

Flex Variant

html, body {
  padding: 0;
  margin: 0;
}

.item-a {
  grid-area: side-left;
}

.item-b {
  grid-area: side-right-up;
}

.item-c {
  grid-area: sider-right-down;
}

.container {
  display: grid;
  grid-template-columns: calc(50% - 15px) calc(50% - 15px);
  grid-template-rows: calc(50% - 15px) 50%;
  grid-template-areas:
    "side-left side-right-up"
    "side-left sider-right-down";
  grid-column-gap: 15px;
  grid-row-gap: 15px;
}

.container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Responsive Grid image View for 3 images

1 Answers