diff options
| author | martinfalisse <martinmotteditfalisse@gmail.com> | 2022-09-17 18:09:35 +0200 |
|---|---|---|
| committer | Andreas Kling <kling@serenityos.org> | 2022-10-06 21:16:01 +0200 |
| commit | 236795e931f31cbd49219bd0f2ce0ea1932a4468 (patch) | |
| tree | 03947809090be05600c64f68ea4ba71348877e54 /Base/res | |
| parent | 86ce1b64f0969682303d7e430d4987c78af23852 (diff) | |
| download | serenity-236795e931f31cbd49219bd0f2ce0ea1932a4468.zip | |
LibWeb+Base: Re-implement grid track span
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.
Diffstat (limited to 'Base/res')
| -rw-r--r-- | Base/res/html/misc/display-grid.html | 40 |
1 files changed, 20 insertions, 20 deletions
diff --git a/Base/res/html/misc/display-grid.html b/Base/res/html/misc/display-grid.html index 16cea2158b..812d6c9b94 100644 --- a/Base/res/html/misc/display-grid.html +++ b/Base/res/html/misc/display-grid.html @@ -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> |