RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-27 21:57:35 +00:00
Code Issues Activity Actions

LibWeb+Base: Re-implement grid track span

Browse source 
Implement span correctly when indicated in the grid-column-start,
grid-row-start, etc. CSS properties. Previously it had been implemented
as if span was something that went alongside the position property, but
actually it seems like if you do 'span 3' in the grid-column-start
property, for example, this means it literally spans 3 blocks, and the
3 has nothing to do with position.
This commit is contained in:
martinfalisse 2022-09-17 18:09:35 +02:00 • committed by Andreas Kling
parent 86ce1b64f0
commit 236795e931
5 changed files with 224 additions and 117 deletions
Download patch file Download diff file Expand all files Collapse all files

40
Base/res/html/misc/display-grid.html
View file

@ -40,26 +40,6 @@
<div class="grid-item">1</div>
</div>
<!-- Using grid-row and grid-column -->
<p>Should render a full-width 4x4 grid with:
<ul>
<li>one large column on the left</li>
<li>one large column on the right, being split in half vertically, with the number 2 in the top half, and numbers 3, 4, 5, and 6 in the bottom</li>
</ul>
<div
class="grid-container"
style="
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 50px 50px 50px 50px;
">
<div class="grid-item" style="grid-row: 1/-1; grid-column: 1/3;">1</div>
<div class="grid-item" style="grid-row: 1/3; grid-column: 3/-1;">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
</div>
<!-- Different column sizes -->
<p>Should render a 2x2 grid with columns 50px and 50%</p>
<div
@ -84,3 +64,23 @@
grid-column: 2 / 2;
grid-row: 2 / 2">4</div>
</div>
<!-- Using grid-row and grid-column -->
<p>Should render a full-width 4x4 grid with:
<ul>
<li>one large column on the left</li>
<li>one large column on the right, being split in half vertically, with the number 2 in the top half, and numbers 3, 4, 5, and 6 in the bottom</li>
</ul>
<div
class="grid-container"
style="
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: 25px 25px 25px 25px 25px 25px 25px 25px;
">
<div class="grid-item" style="grid-row: 1 / -1; grid-column: span 4;">1</div>
<div class="grid-item" style="grid-row: 1 / 5; grid-column: 5 / -1;">2</div>
<div class="grid-item" style="grid-column: span 2; grid-row: span 2;">3</div>
<div class="grid-item" style="grid-column: span 2 / -1; grid-row: span 2;">4</div>
<div class="grid-item" style="grid-column: span 2; grid-row: 7 / span 100;">5</div>
<div class="grid-item" style="grid-column: 7 / span 2; grid-row: span 2 / -1;">6</div>
</div>