Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/css-grid/grid-lanes/item-placement/dense-packing/row-dense-packing-multi-span-006.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Grid Lanes: margins should not affect track opening space</title>
<link rel="author" title="Celeste Pan" href="mailto:celestepan@microsoft.com">
<link rel="match" href="row-dense-packing-multi-span-006-ref.html">
<style>
#preview {
display: grid-lanes;
grid-lanes-direction: row;
grid-template-rows: repeat(3, 1fr);
gap: 8px;
grid-lanes-pack: dense;
height: 316px;
width: 120px;
}
.item-1 {
background: #fbc4c4;
width: 60px;
}
.item-2 {
background: #bae0fd;
width: 120px;
}
.item-3 {
background: #d4b8f0;
width: 80px;
}
.item-4 {
background: #fde8a0;
width: 15px;
grid-row: span 2;
}
#preview .item-4 {
margin-left: -60px;
}
.item-5 {
background: #b5ead7;
width: 20px;
}
</style>
</head>
<body>
<div id="preview">
<div class="item-1">1</div>
<div class="item-2">2</div>
<div class="item-3">3</div>
<div class="item-4">4</div>
<div class="item-5">5</div>
</div>
</body>
</html>