Attempting to create a dynamic grid layout utilizing CSS to ensure optimal responsiveness

Question

Attempting to create a dynamic grid layout utilizing CSS to ensure optimal responsiveness

I am working on creating a webpage layout similar to the one in the link below:

The maximum width for the layout is set to 1600px. However, I am facing challenges in making it fully responsive. This is because all the boxes are given widths in percentages. The first section of the layout is split into two equal parts - 50% on the left and 50% on the right.

Within the 50% on the left, I have included 4 images with each having a width of 50%.

In the 50% on the right, there is a single image with a width of 100%.

While the structure remains responsive when only images are used, adding text below each image in a box with fixed width (66px) causes issues in responsiveness when the screen size is reduced.

Is there a solution to make this layout properly responsive? I attempted making the text box an overlay on the image by positioning it absolutely at the bottom, which resolves the issue but hides the bottom part of the image behind the text box. I want both the image to be fully visible and the text box to remain below it.

Any suggestions or thoughts on how to achieve this? I am open to using JavaScript if it offers a good solution.

html css

Answer 1

Answer №1

*{
  box-sizing: border-box;
}
.fifty {
width: 50%;
padding-bottom: 66px;
position: relative;
}
.parent {
display: flex;
flex-wrap: wrap;
}
img {
width: 100%;
height: 100%;
}
.left {
display: flex;
flex-wrap: wrap;
}
p {
position: absolute;
left: 50%;
bottom: 10px;
transform: translateX(-50%);
}
.pb-0 {
padding-bottom: 0;
}
    .child {
      border: 1px solid #333;
    }

<div class="parent">
<div class="left fifty pb-0">
<div class="fifty  child">
<img src="https://dummyimage.com/350x250/aae0ff/aae0ff" alt="image"/>
<p>Text</p>
</div>
<div class="fifty  child">
<img src="https://dummyimage.com/350x250/aae0ff/aae0ff" alt="image"/>
<p>Text</p> 
</div>
<div class="fifty  child">
<img src="https://dummyimage.com/350x250/aae0ff/aae0ff" alt="image"/>
<p>Text</p> 
</div>
<div class="fifty  child">
<img src="https://dummyimage.com/350x250/aae0ff/aae0ff" alt="image"/>
<p>Text</p> 
</div>
</div>
<div class="right fifty child">
<img src="https://dummyimage.com/350x250/ffa0a0/ffa0a0" alt="image"/>
<p>Text Right</p>
</div>
</div>

It seems like this layout might be what you're looking for. If there's anything else you need help with, feel free to ask!

Answer 2

*{
  box-sizing: border-box;
}
.fifty {
width: 50%;
padding-bottom: 66px;
position: relative;
}
.parent {
display: flex;
flex-wrap: wrap;
}
img {
width: 100%;
height: 100%;
}
.left {
display: flex;
flex-wrap: wrap;
}
p {
position: absolute;
left: 50%;
bottom: 10px;
transform: translateX(-50%);
}
.pb-0 {
padding-bottom: 0;
}
    .child {
      border: 1px solid #333;
    }

<div class="parent">
<div class="left fifty pb-0">
<div class="fifty  child">
<img src="https://dummyimage.com/350x250/aae0ff/aae0ff" alt="image"/>
<p>Text</p>
</div>
<div class="fifty  child">
<img src="https://dummyimage.com/350x250/aae0ff/aae0ff" alt="image"/>
<p>Text</p> 
</div>
<div class="fifty  child">
<img src="https://dummyimage.com/350x250/aae0ff/aae0ff" alt="image"/>
<p>Text</p> 
</div>
<div class="fifty  child">
<img src="https://dummyimage.com/350x250/aae0ff/aae0ff" alt="image"/>
<p>Text</p> 
</div>
</div>
<div class="right fifty child">
<img src="https://dummyimage.com/350x250/ffa0a0/ffa0a0" alt="image"/>
<p>Text Right</p>
</div>
</div>

It seems like this layout might be what you're looking for. If there's anything else you need help with, feel free to ask!

Attempting to create a dynamic grid layout utilizing CSS to ensure optimal responsiveness

Answer №1

Similar questions

Customizing the language parameter for the apply button script on LinkedIn

Out-of-sync movement in animated characters

The sidebar vanishes when you move your cursor over the text contained within

Fixed-positioned left column in a styled table

I'm having trouble with aligning my input checkbox within the form

Another option instead of using the .siblings() method would be

Instructions for submitting information from a web form using Python without needing to know the form's ID or name

Troubleshooting jQuery masonry problem related to initial display and height settings

formula for an arbitrary velocity vector

Make sure to fully load the HTML page before running the PHP code

The steps to properly load "child.vue" into the correct position within "parent.vue" are as follows

What is the best way to redirect to the index page after successfully submitting a new record on the front-end? [Using Rubymine 2020.2.3, Ruby 2.7.2p137, and gem 3.1.2]

Is there a way to illuminate a complete row by simply hovering over a span within one of the columns?

Guide on dragging and dropping without losing the item, allowing for continuous drag and drop functionality

import an external JavaScript file in an HTML document

Tips for incorporating fading text and a CTA into your content block

Customizing Material-UI styles using makeStyles

What is the best way to choose the next adjacent element using a CSS selector with Python Selenium?

Implementing script loading within the Angular scope

Expand the div to fit 100% width inside the Blueprint container