How do I get CSS grid rows to align like columns?

Question

This is a follow-up to the question that I asked earlier, How do I get CSS row-gap and column-gap to not show up if row or column is missing?.

I now have three states of the grid depending on the width of the screen. For the wide (760px - 1000px) to super wide (1000px+) the images don't butt up with each other vertically. This is mostly not a problem because my images are always taller than the text, so this problem never happens. However, I'm just looking to see if there is a way to have in the wide and super wide to have this look more like two or three columns.

For the wide display I'm looking for it to look like this:

instead of this:

I have this favoring wide displays first because my page is designed that way. Making it portable first with CSS is on my to do list but that is for another day.

div.thumbnail
{
    background-color: green;
    padding : 1em;
    break-inside : avoid;
    display : grid;
    column-gap : 1em;
    row-gap : 1em;
    grid-template-columns: auto 1fr; /* define only 2 explicit columns */
    grid-auto-flow: dense;
}

div.thumbnail div.image1
{
    background-color : cyan;
    text-align : right;
    grid-column: 1;
    height : 30px;
}

div.thumbnail div.image2
{
    background-color : pink;
    text-align : left;
    grid-column: 3; /* add another column if (2) or (3) is present */
    height : 30px;
}

div.thumbnail div.image3
{
    background-color : limegreen;
    text-align : left;
    grid-column: 3; /* add another column if (2) or (3) is present */
    height : 30px;
}

div.thumbnail div.text
{
    background-color : orange;
    grid-column: 2;
}

/* for printing and not so wide displays */
@media screen and (max-width: 1000px), print and (max-width: 7.5in)
{
    div.thumbnail
    {
        grid-template-columns : auto 1fr !important;
    }

    div.thumbnail div.image1,
    div.thumbnail div.image2,
    div.thumbnail div.image3
    {
        grid-column: 1;
        text-align: right;
    }
}

/* for printing and small devices like iPhone #1 */
@media screen and (max-width: 760px), print and (max-width: 5in)
{
    div.thumbnail
    {
        grid-template-columns : 1fr !important;
    }

    div.thumbnail div.image1,
    div.thumbnail div.image2,
    div.thumbnail div.image3
    {
        text-align : center;
        grid-column : 1;
        margin : auto;
    }

    div.thumbnail div.text
    {
        grid-column : 1;
        margin : auto;
    }
}

<h2>Three Images</h2>

<div class="thumbnail">
    <div class="image1" style="width:200px">
        image 1
    </div>
    <div class="image2" style="width:200px">
        image 2
    </div>
    <div class="image3" style="width:200px">
        image 3
    </div>
    <div class="text">
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quo odit earum error. Nisi fugit vel nesciunt sint! Officia
        voluptatum distinctio beatae sint qui, similique possimus, natus, iste sit delectus quaerat? Lorem ipsum dolor sit amet
        consectetur, adipisicing elit. Ex quibusdam dolorem aut vitae ipsam quod asperiores alias veritatis tenetur facilis
        deleniti sunt itaque nesciunt eum corporis, eius incidunt iure pariatur.
    </div>
</div>

Thanks for your help.

Mike

Answer 1

I would probably use grid-template-areas, for me it is typically easier since it is visual and simplifies a lot of the code.

<div class="exampleGrid">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
</div>
.exampleGrid{
  display:grid;
  grid-template-areas: 
    "a d d d"
    "b d d d"
    "c d d d";
  grid-gap: 1rem;
  padding: 1rem;
  background: green;
}
.exampleGrid > *:nth-child(1){grid-area: a;background: pink;}
.exampleGrid > *:nth-child(2){grid-area: b;background: plum;}
.exampleGrid > *:nth-child(3){grid-area: c;background: lightblue;}
.exampleGrid > *:nth-child(4){grid-area: d;background: lightgoldenrodyellow}

I made a repl as an example: https://replit.com/@DillonBurnett/CandidScentedEfficiency#index.html

And here is a screenshot:

Answer 2

You could utilize flex-box and create a main row container, which will then again have 2 other rows, acting as cols, by specifying their sizes to take up x amount of space, depending on viewport.

Note that I personally follow the "Mobile First" principles, so I'll be utilizing the min-width query, rather than max-width.

Example:

HTML:

<div class="main row">
    <div class="img-container row">
        <div class="img-item">
            Image 1
        </div>
        <div class="img-item">
            Image 2
        </div>
        <div class="img-item">
            Image 3
        </div>
    </div>
    <div class="text-container row">
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quo odit earum error. Nisi fugit vel nesciunt sint! Officia
        voluptatum distinctio beatae sint qui, similique possimus, natus, iste sit delectus quaerat? Lorem ipsum dolor sit amet
        consectetur, adipisicing elit. Ex quibusdam dolorem aut vitae ipsam quod asperiores alias veritatis tenetur facilis
        deleniti sunt itaque nesciunt eum corporis, eius incidunt iure pariatur.
    </div>
</div>

CSS:

.row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    flex: 0 0 100%;
}

.img-container {
    gap: 1rem;
}

.img-container .img-item {
  padding: 15px;
    width: 100%;
}

.img-container .img-item:nth-child(1) {
    background-color: lightblue;
}

.img-container .img-item:nth-child(2) {
    background-color: lightpink;
}

.img-container .img-item:nth-child(3) {
    background-color: lightgreen;
}

.text-container {
  padding: 15px;
 background-color: orange;
}

.main {
    justify-content: center;
    gap: 1rem;
    background-color: darkgreen;
  padding: 15px;
}

@media screen and (min-width: 760px),
print and (max-width: 5in) {
    .img-container {
        flex: 0 0 23%;
        max-width: 23%;
    }
    .text-container {
        flex: 0 0 73%;
        max-width: 73%;
    background-color: orange;
    }
}

Snippet:

.row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    flex: 0 0 100%;
}

.img-container {
    gap: 1rem;
}

.img-container .img-item {
  padding: 15px;
    width: 100%;
}

.img-container .img-item:nth-child(1) {
    background-color: lightblue;
}

.img-container .img-item:nth-child(2) {
    background-color: lightpink;
}

.img-container .img-item:nth-child(3) {
    background-color: lightgreen;
}

.text-container {
  padding: 15px;
  background-color: orange;
}

.main {
    justify-content: center;
    gap: 1rem;
    background-color: darkgreen;
  padding: 15px;
}

@media screen and (min-width: 760px),
print and (max-width: 5in) {
    .img-container {
        flex: 0 0 23%;
        max-width: 23%;
    }
    .text-container {
        flex: 0 0 73%;
        max-width: 73%;
    }
}

<div class="main row">
    <div class="img-container row">
        <div class="img-item">
            Image 1
        </div>
        <div class="img-item">
            Image 2
        </div>
        <div class="img-item">
            Image 3
        </div>
    </div>
    <div class="text-container row">
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quo odit earum error. Nisi fugit vel nesciunt sint! Officia
        voluptatum distinctio beatae sint qui, similique possimus, natus, iste sit delectus quaerat? Lorem ipsum dolor sit amet
        consectetur, adipisicing elit. Ex quibusdam dolorem aut vitae ipsam quod asperiores alias veritatis tenetur facilis
        deleniti sunt itaque nesciunt eum corporis, eius incidunt iure pariatur.
    </div>
</div>

Codepen link here.

Answer 3

Simply add grid-row: span 3; to text inside the first media query:

div.thumbnail {
  background-color: green;
  padding: 1em;
  break-inside: avoid;
  display: grid;
  column-gap: 1em;
  row-gap: 1em;
  grid-template-columns: auto 1fr; /* define only 2 explicit columns */
  grid-auto-flow: dense;
}

div.thumbnail div.image1 {
  background-color: cyan;
  text-align: right;
  grid-column: 1;
  height: 30px;
}

div.thumbnail div.image2 {
  background-color: pink;
  text-align: left;
  grid-column: 3; /* add another column if (2) or (3) is present */
  height: 30px;
}

div.thumbnail div.image3 {
  background-color: limegreen;
  text-align: left;
  grid-column: 3; /* add another column if (2) or (3) is present */
  height: 30px;
}

div.thumbnail div.text {
  background-color: orange;
  grid-column: 2;
}


/* for printing and not so wide displays */

@media screen and (max-width: 1000px),
print and (max-width: 7.5in) {
  div.thumbnail div.image1,
  div.thumbnail div.image2,
  div.thumbnail div.image3 {
    grid-column: 1;
    text-align: right;
  }
  div.thumbnail div.text {
    grid-row:span 3;
  }
}


/* for printing and small devices like iPhone #1 */

@media screen and (max-width: 760px),
print and (max-width: 5in) {
  div.thumbnail {
    grid-template-columns: 1fr ;
  }
  div.thumbnail div.image1,
  div.thumbnail div.image2,
  div.thumbnail div.image3 {
    text-align: center;
    grid-column: 1;
    margin: auto;
  }
  div.thumbnail div.text {
    grid-column: 1;
    margin: auto;
  }
}

<h2>Three Images</h2>

<div class="thumbnail">
  <div class="image1" style="width:200px">
    image 1
  </div>
  <div class="image2" style="width:200px">
    image 2
  </div>
  <div class="image3" style="width:200px">
    image 3
  </div>
  <div class="text">
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quo odit earum error. Nisi fugit vel nesciunt sint! Officia voluptatum distinctio beatae sint qui, similique possimus, natus, iste sit delectus quaerat? Lorem ipsum dolor sit amet consectetur,
    adipisicing elit. Ex quibusdam dolorem aut vitae ipsam quod asperiores alias veritatis tenetur facilis deleniti sunt itaque nesciunt eum corporis, eius incidunt iure pariatur.
  </div>
</div>