48 lines
1.7 KiB
HTML
48 lines
1.7 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<style>
|
|
.grid {
|
|
display: grid;
|
|
font: 50px/1 Ahem;
|
|
border: 5px dashed magenta;
|
|
width: 150px;
|
|
height: 150px;
|
|
}
|
|
.item {
|
|
border: 50px solid rgba(0, 255, 250, 0.5);
|
|
}
|
|
.gridFR {
|
|
grid: 1fr / 1fr;
|
|
}
|
|
.gridMaxContent {
|
|
grid: max-content / max-content;
|
|
}
|
|
.gridMinContent {
|
|
grid: min-content / min-content;
|
|
}
|
|
.gridAuto {
|
|
grid: auto / auto;
|
|
}
|
|
</style>
|
|
<script src="../../resources/check-layout.js"></script>
|
|
|
|
<body onload="checkLayout('.grid')">
|
|
|
|
<div class="grid gridFR" data-expected-width="160" data-expected-height="160" data-expected-client-width="150" data-expected-client-height="150">
|
|
<div class="item" data-expected-width="150" data-expected-height="150" data-expected-client-width="50" data-expected-client-height="50">X</div>
|
|
</div>
|
|
|
|
<div class="grid gridMinContent" data-expected-width="160" data-expected-height="160" data-expected-client-width="150" data-expected-client-height="150">
|
|
<div class="item" data-expected-width="150" data-expected-height="150" data-expected-client-width="50" data-expected-client-height="50">X</div>
|
|
</div>
|
|
|
|
<div class="grid gridMaxContent" data-expected-width="160" data-expected-height="160" data-expected-client-width="150" data-expected-client-height="150">
|
|
<div class="item" data-expected-width="150" data-expected-height="150" data-expected-client-width="50" data-expected-client-height="50">X</div>
|
|
</div>
|
|
|
|
<div class="grid gridAuto" data-expected-width="160" data-expected-height="160" data-expected-client-width="150" data-expected-client-height="150">
|
|
<div class="item" data-expected-width="150" data-expected-height="150" data-expected-client-width="50" data-expected-client-height="50">X</div>
|
|
</div>
|
|
|
|
</body>
|