Need suggestion for this layout

[viveknath322]

Hi all,

I need your valuable suggestions on how to make this layout perfectly.
These are all static images.

[Gandalf]

I assume this is your desktop layout? What about mobile?

[viveknath322]

Yes, this is desktop layout.
On mobile a background image with center portion(search area) is showing

[DaveMaxwell]

Grid is your friend…set your heights accordingly and you should be good to go.

[viveknath322]

Thanks for the heads up, I’ll try this

[viveknath322]

This is what I’ve created

Can you check this?

[DaveMaxwell]

Huh. Your example looked (to me) like the first and last columns are wider. My mistake.

If you’re going with a 4x4 grid, then you don’t need all the .hero_img* entries. You can strip all of them out except for the .hero_search which has the span (which I forgot about) in it.

Just a suggestion, but I would add a gap: 0 to the .hero class, and change the image dimensions to give it much more flexibility. I had to use the calc instead of just 33vh because it adds scrollbars in both dimensions (doesn’t make any sense). Only thing I can think of is there must be a rounding bug somewhere

img.hero_img {
  width: 25vw;
  height: calc(33vh - 2px);
}

[viveknath322]

Thank you for your suggestions.
I’m not able to figure out the gap between images(screenshot attached)

[DaveMaxwell]

That’s because you have the dimensions set to the image and not the div (the gap is coming from the div).

Change your css to this and it should work the way you want (if I understand what you’re asking for)

html, body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
   background-color: #000;
}
.hero {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}
.hero > * {
  width: 25vw;
  height: calc(33vh - 2px);
}
img.hero_img {
  width: 100%; 
  height: 100%; 
  margin: 0;
}
.hero_search {
  grid-column: 2 / span 2;
}