mirror of
https://github.com/RGBCube/serenity
synced 2025-07-27 06:47:35 +00:00
Base: Add display grid test page
This commit is contained in:
parent
ffc0f9550d
commit
a7f5b6b15b
1 changed files with 31 additions and 0 deletions
31
Base/res/html/misc/display-grid.html
Normal file
31
Base/res/html/misc/display-grid.html
Normal file
|
@ -0,0 +1,31 @@
|
|||
<style>
|
||||
.grid-container {
|
||||
display: grid;
|
||||
background-color: lightsalmon;
|
||||
}
|
||||
.grid-item {
|
||||
background-color: lightblue;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- A basic grid -->
|
||||
<p>Should render a 2x2 grid</p>
|
||||
<div
|
||||
class="grid-container"
|
||||
style="grid-template-columns: auto auto;">
|
||||
<div class="grid-item">1</div>
|
||||
<div class="grid-item">2</div>
|
||||
<div class="grid-item">3</div>
|
||||
<div class="grid-item">4</div>
|
||||
</div>
|
||||
|
||||
<!-- Different row heights -->
|
||||
<p>Should render a 2x2 grid with the first row having a height of 50px</p>
|
||||
<div
|
||||
class="grid-container"
|
||||
style="grid-template-columns: auto auto;">
|
||||
<div class="grid-item" style="height: 50px;">1</div>
|
||||
<div class="grid-item">2</div>
|
||||
<div class="grid-item">3</div>
|
||||
<div class="grid-item">4</div>
|
||||
</div>
|
Loading…
Add table
Add a link
Reference in a new issue