Columns lining up with content-CodePudding

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  style="font-family: 'lato',helvetica;">
  <div >
    <div  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  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  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 >
    <div  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  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  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>

CodePudding user response：

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  style="font-family: 'lato',helvetica;">
  <div >
    <div  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  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  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  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  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  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>