mirror of
https://github.com/RGBCube/serenity
synced 2025-07-06 22:17:35 +00:00
75 lines
No EOL
2.6 KiB
HTML
75 lines
No EOL
2.6 KiB
HTML
<style>
|
|
body {
|
|
font-family: 'SerenitySans';
|
|
}
|
|
|
|
.grid-container {
|
|
display: grid;
|
|
background-color: lightsalmon;
|
|
}
|
|
|
|
.grid-item {
|
|
background-color: lightblue;
|
|
}
|
|
</style>
|
|
|
|
<!-- Basic minmax(): Should render 2 items side by side, each with a minimum width of 150px, If there is enough space,
|
|
they will expand up to 300px each. -->
|
|
<div class="grid-container" style="grid-template-columns: minmax(150px, 300px) minmax(150px, 300px);">
|
|
<div class="grid-item">1</div>
|
|
<div class="grid-item">2</div>
|
|
</div>
|
|
|
|
<!-- Basic minmax vertical
|
|
Since there is no vertical limit, the two rows should be 50px high each. -->
|
|
<div class="grid-container" style="
|
|
grid-template-columns: minmax(150px, 300px) minmax(150px, 300px);
|
|
grid-template-rows: minmax(25px, 50px) minmax(25px, 50px);
|
|
">
|
|
<div class="grid-item">1</div>
|
|
<div class="grid-item">2</div>
|
|
</div>
|
|
|
|
<!-- Invalid minmax value as can't have a flexible length as a minimum value.
|
|
Should render 2 items with no grid formatting (one on top of the other) -->
|
|
<div class="grid-container" style="grid-template-columns: minmax(1fr, 100px) 1fr 1fr;">
|
|
<div class="grid-item">1</div>
|
|
<div class="grid-item">2</div>
|
|
</div>
|
|
|
|
<!-- Invalid minmax value in repeat as can't have a flexible length as a minimum value
|
|
Should render 2 items with no grid formatting (one on top of the other) -->
|
|
<div class="grid-container" style="grid-template-columns: repeat(3, minmax(1fr, 100px));">
|
|
<div class="grid-item">1</div>
|
|
<div class="grid-item">2</div>
|
|
</div>
|
|
|
|
<!-- Basic minmax vertical
|
|
Since there is a height limit, the rows should be 25px high each. -->
|
|
<div class="grid-container" style="
|
|
height: 50px;
|
|
grid-template-columns: minmax(150px, 300px) minmax(150px, 300px);
|
|
grid-template-rows: minmax(25px, 50px) minmax(25px, 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>
|
|
|
|
<!-- Minmax horizontal with maximum as flex
|
|
3 columns with minimum 200px and maximum 100%. -->
|
|
<div class="grid-container" style="
|
|
grid-template-columns: minmax(200px, 1fr) minmax(200px, 1fr) minmax(200px, 1fr);
|
|
">
|
|
<div class="grid-item">1</div>
|
|
<div class="grid-item">2</div>
|
|
<div class="grid-item">3</div>
|
|
</div>
|
|
|
|
<!-- Article layout: small margins on mobile, large on desktop. Centered column with 70ch width maximum -->
|
|
<div class="grid-container" style="grid-template-columns: minmax(1rem, 1fr) minmax(auto, 70ch) minmax(1rem, 1fr);">
|
|
<div class="grid-item">1</div>
|
|
<div class="grid-item">Article content</div>
|
|
<div class="grid-item">3</div>
|
|
</div> |