Search code examples
htmlcsscss-grid

How to Allow Grid Text to Flow to the Next Row

As you can see in the grid below, I have two rows. The first row contains an element and text, while the second row is just text:

.container {  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-areas:
    "Image Image Text-1"
    "Image Image Text-1"
    "Text-2 Text-2 Text-2";
}

.Image { grid-area: Image; }

.Text-1 { grid-area: Text-1; }

.Text-2 { grid-area: Text-2; }

div{
outline : 1px solid black
}
<div class="container">
  <div class="Image">Grid elements comes here</div>
  <div class="Text-1">Top Text Top Text Top Text Top Text Top Text Top Text Top Text
  Top Text Top Text Top Text Top Text Top Text Top Text Top Text  Top Text Top Text Top Text Top Text Top Text Top Text Top Text  Top Text Top Text Top Text Top Text Top Text Top Text Top Text  Top Text Top Text Top Text Top Text Top Text Top Text Top Text  Top Text Top Text Top Text Top Text Top Text Top Text Top Text  Top Text Top Text Top Text Top Text Top Text Top Text Top Text  Top Text Top Text Top Text Top Text Top Text Top Text Top Text  Top Text Top Text Top Text Top Text Top Text Top Text Top Text  Top Text Top Text Top Text Top Text Top Text Top Text Top Text  Top Text Top Text Top Text Top Text Top Text Top Text Top Text  Top Text Top Text Top Text Top Text Top Text Top Text Top Text  Top Text Top Text Top Text Top Text Top Text Top Text Top Text  Top Text Top Text Top Text Top Text Top Text Top Text Top Text
  Top Text Top Text Top Text Top Text Top Text Top Text Top Text</div>
  <div class="Text-2">Bottom Text Bottom Text Bottom Text Bottom Text Bottom Text Bottom Text Bottom Text Bottom Text Bottom Text Bottom Text Bottom Text Bottom Text Bottom Text Bottom Text Bottom Text Bottom Text Bottom Text Bottom Text Bottom Text Bottom Text Bottom Text Bottom Text Bottom Text Bottom Text Bottom Text Bottom Text Bottom Text Bottom Text Bottom Text Bottom Text Bottom Text Bottom Text Bottom Text Bottom Text Bottom Text Bottom Text Bottom Text Bottom Text Bottom Text Bottom Text Bottom Text Bottom Text Bottom Text Bottom Text Bottom Text  </div>
</div>

This grid structure represents text next to an image, with the rest of the text (meaning the second part of the same paragraph) below the image.

I would like to know if it's possible (its fine to use something other than grid if needed) to achieve the same structure with only one div containing the text, where the text starts next to the image and flows to the row below when no space is available.

End goal :

enter image description here

Solution

  • Don't use grid, use text-wrap and float to achieve this!

    This should be exactly what you're looking for.

        .container {
        width: 340px;
        border: 4px solid black;
    }
    .image {
        float: left;
        width: 150px;
        margin: 0px 10px 0px 0px;
        border-color: black;
        border-style: solid;
        border-width: 0 4px 4px 0;
    }
    .text-1 {
        padding: 5px;
        text-wrap: wrap;
    }
    <div class="container">
    <img class="image" src="https://developers.elementor.com/docs/assets/img/elementor-placeholder-image.png" alt="Your image!">
    <div class="text-1">
        The rest of the text..........
        The rest of the text..........
        The rest of the text..........
        The rest of the text..........
        The rest of the text..........
        The rest of the text..........
        The rest of the text..........
        The rest of the text..........
        The rest of the text..........
        The rest of the text..........
        The rest of the text..........
        The rest of the text..........
        The rest of the text..........
        The rest of the text..........
        The rest of the text..........
        The rest of the text..........
        The rest of the text..........
        The rest of the text..........
        The rest of the text..........
    </div>
  </div>