Aligning text paragraphs after a line break in a 2x2 flex grid [duplicate]
Solution 1:
This is not possible at present (2019/06)* with any CSS layout method.
display:subgrid solves the issue but it has limited non-experimental adoption by browsers as yet.*
*[2019/12 Update] - Subgrid is now shipped in Firefox 71
Support @ CanIuse.com
--
It is enabled, by default, in Firefox 71+ so it is possible to test. Until this is fully adopted Javacript is needed to equalise element heights.
A couple of resources links from Rachel Andrew (a CSS-Grid envangalist)
- https://rachelandrew.co.uk/archives/2019/04/16/css-subgrid-news-and-demos/
and
YouTube video on subgrid
And Another
* { margin: 0; padding: 0; box-sizing: border-box; } ::before, ::after { box-sizing:inherit; }
.Grid {
display: grid;
width:90%;
margin:auto;
grid-gap: 10px;
grid-template-columns: repeat( auto-fill, 280px);
}
.loon-card {
display:grid;
grid-row: span 5; /* as we have 5 card components in each card */
grid-template-rows:subgrid;
border: 1px solid #ddd;
padding: 10px;
}
.long-description {
border-top: 1px solid #ddd;
}
.price {
padding:.5em;
text-align:center;
}
img {
max-width:100%;
display: block;
}<div class="Grid">
<div class="loon-card">
<img src="http://www.fillmurray.com/300/200">
<div class="short-description">
Title:1
<br/>Title:2
<br/>Title:3
<br/>Title:4
</div>
<div class="long-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas.
</div>
<div class='price'>12.00$</div>
<button>buy</button>
</div>
<div class="loon-card">
<img src="http://www.fillmurray.com/300/200">
<div class="short-description">
Title:1
<br/>Title:2
<br/>Title:3
<br/>Title:4
<br/>Title:5
<br/>Title:6
</div>
<div class="long-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas.
</div>
<div class='price'>12.00$</div>
<button>buy</button>
</div>
<div class="loon-card">
<img src="http://www.fillmurray.com/300/200">
<div class="short-description">
Title:1
<br/>Title:2
<br/>Title:3
<br/>Title:4
</div>
<div class="long-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas.
</div>
<div class='price'>14.00$</div>
<button>buy</button>
</div>
<div class="loon-card">
<img src="http://www.fillmurray.com/300/200">
<div class="short-description">
Title:1
<br/>Title:2
<br/>Title:3
<br/>Title:4
</div>
<div class="long-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas.
</div>
<div class='price'>15.00$</div>
<button>buy</button>
</div>
</div>Resulting output (FF Nightly)
Solution 2:
Arguably, you could achieve the same thing without subgrid though it's a bit more of a pain.
In my example, I didn't change the HTML so I use display: contents to sort of bring the children up one level of the DOM tree. But if you can change your markup and don't mind the resulting mess, you could also achieve this without display: contents.
.Grid {
display: grid;
grid-gap: 10px;
}
.loon-card {
display: contents;
}
img {
width: 100%;
grid-row-start: 1;
}
.short-description {
grid-row-start: 2;
}
.long-description {
grid-row-start: 3;
}
.price {
grid-row-start: 4;
}
button {
grid-row-start: 5;
}<div class="Grid">
<div class="loon-card">
<img src="http://www.fillmurray.com/300/200">
<div class="short-description">
Title:1
<br />Title:2
<br />Title:3
<br />Title:4
</div>
<div class="long-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla
scelerisque egestas.
</div>
<div class='price'>12.00$</div>
<button>buy</button>
</div>
<div class="loon-card">
<img src="http://www.fillmurray.com/300/200">
<div class="short-description">
Title:1
<br />Title:2
<br />Title:3
<br />Title:4
<br />Title:5
<br />Title:6
</div>
<div class="long-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla
scelerisque egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec
et lorem ac nulla scelerisque egestas.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla
scelerisque egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec
et lorem ac nulla scelerisque egestas.
</div>
<div class='price'>12.00$</div>
<button>buy</button>
</div>
<div class="loon-card">
<img src="http://www.fillmurray.com/300/200">
<div class="short-description">
Title:1
<br />Title:2
<br />Title:3
<br />Title:4
</div>
<div class="long-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla
scelerisque egestas.
</div>
<div class='price'>14.00$</div>
<button>buy</button>
</div>
<div class="loon-card">
<img src="http://www.fillmurray.com/300/200">
<div class="short-description">
Title:1
<br />Title:2
<br />Title:3
<br />Title:4
</div>
<div class="long-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla
scelerisque egestas.
</div>
<div class='price'>15.00$</div>
<button>buy</button>
</div>
</div>