mirror of
https://github.com/fergalmoran/ladybird.git
synced 2026-02-20 14:44:43 +00:00
58 lines
1.8 KiB
HTML
58 lines
1.8 KiB
HTML
<style>
|
|
.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> |