0

I want to align elements with different sizes of my column horizontally between items from other columns (based on bigger one) The text is a dynamic value. It can feet a dynamic number of rows.

p,
h6 {
  margin: 0;
}

.container {
  background: green;
  display: flex;
  gap: 60px;
}

.item {
  width: 33.3%;
  background: red;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.item img {
  width: 100px;
  height: 100px;
  background: yellow;
  align-self: center;
}

.item h6 {
  background: blue;
}

.item p {
  background: green;
}
<div class="container">
  <div class="item">
    <img src="" alt="">
    <h6>Some Title Some Title Some Title Some Title Some Title Some Title Some Title Some Title Some Title Some Title</h6>
    <p>
      Nunc nonummy metus. Phasellus volutpat, metus eget egestas mollis, lacus lacus blandit dui, id egestas quam mauris ut lacus. Aliquam erat volutpat. Ut a nisl id ante tempus hendrerit. Nam pretium turpis et arcu. Nunc nonummy metus. Phasellus volutpat,
      metus eget egestas mollis, lacus lacus blandit dui, id egestas quam mauris ut lacus. Aliquam erat volutpat. Ut a nisl id ante tempus hendrerit. Nam pretium turpis et arcu.
    </p>
  </div>
  <div class="item">
    <img src="" alt="">
    <h6>Some Title Some</h6>
    <p>
      Nunc nonummy metus. Phasellus volutpat, metus eget egestas mollis, lacus lacus blandit dui, id egestas quam mauris ut lacus. Aliquam erat volutpat. Ut a nisl id ante tempus hendrerit. Nam pretium turpis et arcu.
    </p>
  </div>
  <div class="item">
    <img src="" alt="">
    <h6>Some Title Some Title Some Title Some Title Some Title Some Title Some Title Some Title Some Title Some Title Some Title Some Title Some Title Some Title Some Title Some Title Some Title Some Title Some Title Some Title</h6>
    <p>
      Nunc nonummy metus. Phasellus volutpat, metus eget egestas mollis, lacus lacus blandit dui, id egestas quam mauris ut lacus. Aliquam erat volutpat. Ut a nisl id ante tempus hendrerit. Nam pretium turpis et arcu.
    </p>
  </div>
</div>

Screenshot Before: enter image description here

Screenshot After: enter image description here

David Thomas
  • 249,100
  • 51
  • 377
  • 410
Andrew Kovalchuk
  • 897
  • 1
  • 10
  • 29
  • The question has a css tag only. Are you open to a JS/jQuery answer? If so check this question: https://stackoverflow.com/questions/10922889/use-jquery-to-get-largest-height-value-of-children-then-apply-that-height-value – Riccardo LV Nov 10 '22 at 22:29
  • @RiccardoLV I'm interested just in the CSS solution. Your URL doesn't solve my problem even with the JS/JQuery. I can make each column's height equal to each others just with CSS. But my problem is a little bit another. – Andrew Kovalchuk Nov 10 '22 at 22:36
  • 1
    You're looking for the [`subgrid`](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Subgrid) property-value (to be used on `grid-template-columns`/`grid-template-rows`); unfortunately this is only supported in Firefox and Safari (at the time of writing, and Chrome doesn't seem to have any impetus to do anything with it, yet). Here's [a demo](https://jsfiddle.net/davidThomas/08rdyf9w/1/), so you can see - in Firefox or Safari - how it might be used once it's more widely available. – David Thomas Nov 10 '22 at 22:42
  • As an aside, though, it would probably help your question if it was easier for those answering to reproduce your problem; can you put together some basic `Lorem ipsum` HTML that we can work with, in order to minimise our workload when we want to help? – David Thomas Nov 10 '22 at 22:47
  • @AndrewKovalchuk Indeed "my" url CAN solve your problem: just assign the same class to the elements with the blu border in your pictures and then run the jQuery code you find there with that class in place of "div.columns". But since you're looking for a CSS only solution I wish someone will make you happy with that :-) – Riccardo LV Nov 10 '22 at 22:50
  • @DavidThomas Thanks, I've already added the initial code. – Andrew Kovalchuk Nov 10 '22 at 23:05

1 Answers1

-2

You could use display: flex

If you modify your HTML so you nest the blue and green text in a separate div, the CSS for said div would look something like this:

.nested_div_class{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
 }

or you could use display: grid, with the size of every grid cell pre-set

Memorabilien
  • 1
  • 2