Row subgrid contribution sizing reused the parent grid's available width, so descendants in flexible columns could contribute an unwrapped height and then wrap during layout. Use the resolved subgrid item width when measuring row contributions.
28 lines
469 B
HTML
28 lines
469 B
HTML
<!doctype html>
|
|
<style>
|
|
* {
|
|
box-sizing: border-box;
|
|
border: 1px solid;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.outer {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: 12px;
|
|
width: 768px;
|
|
}
|
|
|
|
.card {
|
|
display: grid;
|
|
grid-row: span 3;
|
|
grid-template-rows: subgrid;
|
|
gap: 12px;
|
|
}
|
|
</style>
|
|
<div class="outer">
|
|
<div class="card">
|
|
<p>Some long text that should wrap over to the next line</p>
|
|
</div>
|
|
</div>
|