mirror of
https://github.com/RGBCube/serenity
synced 2025-07-07 07:57:35 +00:00
62 lines
No EOL
1.9 KiB
HTML
62 lines
No EOL
1.9 KiB
HTML
<style>
|
|
body {
|
|
font-family: 'SerenitySans';
|
|
}
|
|
|
|
.grid-container {
|
|
display: grid;
|
|
background-color: lightsalmon;
|
|
}
|
|
|
|
.grid-item {
|
|
background-color: lightblue;
|
|
}
|
|
</style>
|
|
|
|
<!-- There should be a large (50px) column gap and small (10px) row gap -->
|
|
<div class="grid-container" style="
|
|
grid-template-columns: auto auto;
|
|
gap: 10px 50px;
|
|
">
|
|
<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>
|
|
|
|
<!-- There should be a Z-shaped gap (with both vertical and horizontal gap) -->
|
|
<div class="grid-container" style="
|
|
grid-template-columns: auto auto;
|
|
gap: calc(1vh + 10px) calc(10% - 10px);
|
|
">
|
|
<div class="grid-item" style="grid-column: 2 / span 1">1</div>
|
|
<div class="grid-item">2</div>
|
|
</div>
|
|
|
|
<!-- Column-gaps with overflowing column spans -->
|
|
<!-- There should be 1 column that starts at column 2 and spans until the end. -->
|
|
<div class="grid-container" style="
|
|
grid-column-gap: 16px;
|
|
grid-template-columns: 1fr 1fr;
|
|
">
|
|
<div class="grid-item" style="grid-column: 2 / span 5;">1</div>
|
|
</div>
|
|
|
|
<!-- Column-gaps with overflowing column spans and row spans -->
|
|
<!-- There should be 1 column that starts at column 2 and spans until the end. -->
|
|
<div class="grid-container" style="
|
|
grid-column-gap: 16px;
|
|
grid-template-columns: 1fr 1fr;
|
|
grid-template-rows: 20px;
|
|
">
|
|
<div class="grid-item" style="grid-column: 2 / span 5; grid-row: span 4">1</div>
|
|
</div>
|
|
|
|
<!-- Bug with column gaps - grid items should have normal height -->
|
|
<div class="grid-container with-border" style="
|
|
grid-column-gap: 10px;
|
|
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
|
">
|
|
<div class="grid-item with-border">left side text</div>
|
|
<div class="grid-item with-border">right side text right side text right side text</div>
|
|
</div> |