mirror of
https://github.com/RGBCube/serenity
synced 2025-10-31 08:52:44 +00:00
87a7299078
Partially implements: - Increase sizes to accommodate spanning items crossing content-sized tracks - Increase sizes to accommodate spanning items crossing flexible tracks from https://www.w3.org/TR/css-grid-2/#algo-content
53 lines
No EOL
1.8 KiB
HTML
53 lines
No EOL
1.8 KiB
HTML
<style>
|
|
.grid-container {
|
|
display: grid;
|
|
grid-template-columns: auto auto;
|
|
grid-template-rows: auto auto;
|
|
}
|
|
|
|
.item-span-one-one {
|
|
background-color: lightpink;
|
|
grid-row: 1 / span 1;
|
|
grid-column: 2;
|
|
}
|
|
|
|
.item-span-one-two {
|
|
background-color: lightgreen;
|
|
grid-row: 2 / span 1;
|
|
grid-column: 2;
|
|
}
|
|
|
|
.item-span-two {
|
|
background-color: lightskyblue;
|
|
grid-row: 1 / span 2;
|
|
grid-column: 1;
|
|
}
|
|
</style>
|
|
<div class="grid-container">
|
|
<div class="grid-item item-span-one-one">
|
|
In a sollicitudin augue. Sed ante augue, rhoncus nec porttitor id,
|
|
lacinia et nibh. Pellentesque diam libero, ultrices eget eleifend at,
|
|
consequat ut orci.
|
|
</div>
|
|
<div class="grid-item item-span-one-two">
|
|
Suspendisse potenti. Pellentesque at varius lacus, sed sollicitudin leo.
|
|
Pellentesque malesuada mi eget pellentesque tempor. Donec egestas mauris
|
|
est, ut lobortis nisi luctus at. Vivamus eleifend, lorem vulputate
|
|
maximus porta, nunc metus porttitor nibh, nec bibendum nulla lectus ut
|
|
felis.
|
|
</div>
|
|
<div class="grid-item item-span-two">
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae
|
|
condimentum erat, ac posuere arcu. Aenean tincidunt mi ligula, vel
|
|
semper dolor aliquet at. Phasellus scelerisque dapibus diam sed rhoncus.
|
|
Proin sed orci leo. Praesent pellentesque mi eu nunc gravida, vel
|
|
consectetur nulla malesuada. Sed pellentesque, elit sit amet
|
|
sollicitudin sollicitudin, lectus justo facilisis lacus, ac vehicula
|
|
metus neque ac mi. In in augue et massa maximus venenatis auctor
|
|
fermentum dui. Aliquam dictum finibus urna, quis lacinia massa laoreet
|
|
a. Suspendisse elementum non lectus nec elementum. Quisque ultricies
|
|
suscipit porttitor. Sed non urna rutrum, mattis nulla at, feugiat erat.
|
|
Duis orci elit, vehicula sed blandit eget, auctor in arcu. Ut cursus
|
|
magna sit amet nulla cursus, vitae gravida mauris dictum.
|
|
</div>
|
|
</div> |