CODEWITHSUNDEEP
cssflexboxcss-grid
Kirk Ross
Kirk Ross

Reputation: 7153

CSS grid - 1 x 4up responsive layout with inline images?

How would I create this layout so the 10px gutters/gaps remain consistent and the image aspect ratios remain at all screen sizes? The black represents the grid-container and the rectangles, the 678x399 images.

enter image description here

Every grid-column/row approach I've tried ends up jacking the layout when I shrink my browser. I'm using this HTML (which I can't easily change unless I use brute force vanilla JS to find and replace elements, etc.)

<div class="grid-container">
  <div class="grid-item">
    <img src="https://imageurl-1.jpg">
  </div>
  <div class="grid-item">
    <img src="https://imageurl-2.jpg">
  </div>
  <div class="grid-item">
    <img src="https://imageurl-3.jpg">
  </div>
  <div class="grid-item">
    <img src="https://imageurl-4.jpg">
  </div>
  <div class="grid-item">
    <img src="https://imageurl-5.jpg">
  </div>
</div>

Upvotes: 0

Views: 129

Answers (1)

A Haworth
A Haworth

Reputation: 36436

Because the gaps are fixed at 10px - that is, the horizontal and vertical gaps are not in proportion to the width/height of the images, this is not a simple grid with the two 'sides' being the same width.

In this snippet the full width of the overall grid (including the left and right 10px borders) is set in CSS variable --fs.

All other widths and heights are calculated from that, plus the 10px gap and the ratio of the width/height of the image.

  * {
  margin: 0;
  padding: 0;
}

.grid-container {
  --fw: 100vw;
  --w1: calc((var(--fw) - 40px + (var(--ratio) * 10px))/2);
  /* the width of the big rectangle */
  --ratio: calc(678 / 399);
  --h1: calc( var(--w1) / var(--ratio));
  /* the height of the big rectangle */
  --h: calc((var(--h1) - 10px) / 2);
  /* the height and width of the smaller rectangles */
  --w: calc( var(--h) * var(--ratio));
  display: inline-grid;
  gap: 10px;
  grid-template-areas: 'A B C' 'A D E';
  grid-template-columns: var(--w1) var(--w) var(--w);
  grid-template-rows: auto auto;
  box-sizing: border-box;
  border: solid 10px black;
  background-color: black;
  margin: 0 auto;
}

.grid-container>div {
  height: var(--h);
  width: var(--w);
}

.grid-container>div:nth-child(1) {
  width: var(--w1);
  height: var(--h1);
}

img {
  width: 100%;
  height: 100%;
}

.grid-container> :nth-child(1) {
  grid-area: A;
}

.grid-container> :nth-child(2) {
  grid-area: B;}
.grid-container> :nth-child(3) {
    grid-area: C;
  }
  .grid-container> :nth-child(4) {
    grid-area: D;
  }
  .grid-container> :nth-child(5) {
    grid-area: E;
  }
<div class="grid-container">
  <div class="grid-item">
    <img src="https://picsum.photos/id/1015/678/399">
  </div>
  <div class="grid-item">
    <img src="https://picsum.photos/id/1015/678/399">
  </div>
  <div class="grid-item">
    <img src="https://picsum.photos/id/1015/678/399">
  </div>
  <div class="grid-item">
    <img src="https://picsum.photos/id/1015/678/399">
  </div>
  <div class="grid-item">
    <img src="https://picsum.photos/id/1015/678/399">
  </div>
</div>

Upvotes: 2

Related Questions