2

I want to achieve the following grid layout: 4 column grid layout

Each column contains an image, whereas the middle one has as col span of 2. All the text belongs together, i.e. I want to distribute it equally across all columns.

As every column should start with an image and the images have different formats/heights it is hard to split the text in three parts so that we have a row in the end with equal heights.

Is there a way to distribute the text across grid columns to have in the end a columns with equal heights?

I am open for any recommendations.

I did try a a multicolumn layout approach using column-count and float left for the images. Unfortunatelly, it is not possible to give an image break-before: column AND float: left as the break property has no effect for floating elements. You can find an example here: https://codepen.io/sidyes-the-looper/pen/RwJjQxd

.container {
  column-count: 3;
  column-fill: balance-all;
  background-color: grey;
}

img {
  width: 100%;
  float: left; /* uncomment this to see the break working */
  break-before: column; /* <- this is not working since the img has float left */
}

img::before {
  break-before: column;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.0.2/tailwind.min.css" rel="stylesheet"/>
<div class="h-screen w-full flex flex-col items-center">
      <div class="container">
        <img id="img1" src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3f/Placeholder_view_vector.svg/681px-Placeholder_view_vector.svg.png" />
         <img id="img2" src="data:image/png;base64,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" />
         <img id="img3"  src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3f/Placeholder_view_vector.svg/681px-Placeholder_view_vector.svg.png" />
        <p>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet cl Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet cl Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet cl Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet cl
          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet cl Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet cl Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet cl Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet cl Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet cl Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet cl Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet cl
        </p>
      </div>
      
    </div>

I did also try to use flex-box / grid columns but I did not find a way to distribute the text equally across the columns.

G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129
skimbaz
  • 33
  • 4
  • Hello, we are missing your markup, so we can advise from it. Grid could provide solutions, beside, if image have a specific ratio, we could even use it to set a grid to start from.... but no code no chocolate! – G-Cyrillus Nov 18 '22 at 14:54
  • Hey @G-Cyrillus, I just updated my post with an example: https://codepen.io/sidyes-the-looper/pen/RwJjQxd – skimbaz Nov 18 '22 at 15:23
  • hello, just saw your code and added it to your question .... does in real life you have 3 img then a single p holding all that much of text ? I would have expected at the mimum: 1 img followed by its text, then again and again. grid will not help since it cannot dispatch and break a single element within 3 cells (a single p here , so only column could do). Column will only draw columns of equals width. , flex is useless if image can be of different heights. Are images a matter of design or content? What would really be the final HTML structure? from your code, js could help transform the dom. – G-Cyrillus Nov 18 '22 at 19:56
  • here is a poc example to show the idea about using js to break the text into 3 containers and grid display , hope this is an hint that will be usefull to you https://jsfiddle.net/mo9bLg75/ – G-Cyrillus Nov 18 '22 at 22:39
  • Unfortunately, it is a matter of design. The images are part of one project and should be the first Element in each column. The underlying text should span along all three columns equally distributed. – skimbaz Nov 19 '22 at 06:19

0 Answers0