I have come across a problem, I can only use CSS and HTML. But for this I will give a basic layout that I have found.
The plan is to use this code instead of making the columns with (Min-height) (Height) on each div class, I was wondering if there could be a way of writing some CSS code that does that for you. It also needs to work in Mobile View, when in this view the columns should stack above one another.
If anyone could help me with this that would be great!!!!!
.border-thinlight {
border: 0.5rem solid #ffffff;
}
.bg-rboffwhite {
background-color: #f4f4f4;
}
.row {
display: grid;
grid-auto-flow: column;
gap: 3%;
}
.col {
border: none;
}
/* Responsive layout - makes the columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.row {
width: 100%;
}
}<div class="page" style="font-family: 'lato',helvetica;">
<div class="row border-thinlight">
<div class="col bg-rboffwhite" style="padding: 1vw;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
<div class="col bg-rboffwhite" style="padding: 1vw;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div>
<div class="col bg-rboffwhite" style="padding: 1vw;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.</div>
</div>
<br /><br />
<div class="row border-thinlight">
<div class="col bg-rboffwhite" style="padding: 1vw;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
<div class="col bg-rboffwhite" style="padding: 1vw;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.<br /><br />
<center>
<img src="https://image.petmd.com/files/styles/863x625/public/2022-10/Dachshund.jpeg" width="400px" height="250px" /></center>
</div>
<div class="col bg-rboffwhite" style="padding: 1vw;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.</div>
</div>
</div>I've changed your row class to grid (just so it's a bit more descriptive) but added the grid-template-columns property to repeat(3, 1fr). This basically says 'create 3 columns and make them all the same width'.
I've then added the grid-auto-rows property and set this to 1fr. This makes all the rows the same height. Finally removed the width and height attributes from the image and added the img selector to your CSS and set the image width to 100% so it is the full width of the container and scales up and down as the browser window is resized.
To make them stack on top of each other, I've set the grid-template-columns property to just 1fr which is basically telling the browser that, at small screen sizes, you just want one column.
Have a look and if it's not exactly what you're looking to achieve pop a comment below.
.border-thinlight {
border: 0.5rem solid #ffffff;
}
.bg-rboffwhite {
background-color: #f4f4f4;
}
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 1fr;
gap: 3%;
}
.col {
border: none;
}
img {
width: 100%;
}
/* Responsive layout - makes the columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.grid {
grid-template-columns: 1fr;
}
}<div class="page" style="font-family: 'lato',helvetica;">
<div class="grid border-thinlight">
<div class="col bg-rboffwhite" style="padding: 1vw;">1 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
<div class="col bg-rboffwhite" style="padding: 1vw;">2 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div>
<div class="col bg-rboffwhite" style="padding: 1vw;">3 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.</div>
<div class="col bg-rboffwhite" style="padding: 1vw;">4 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
<div class="col bg-rboffwhite" style="padding: 1vw;">5 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.<br /><br />
<img src="https://image.petmd.com/files/styles/863x625/public/2022-10/Dachshund.jpeg" />
</div>
<div class="col bg-rboffwhite" style="padding: 1vw;">6 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.</div>
</div>
</div>