<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Grid Layout Test Reference: Support for 'grid-auto-columns' and
'grid-auto-rows' properties with implicit tracks after and before the
explicit grid</title>
<style>
#wrapper {
display: grid;
grid-template-columns: 50px 50px 50px 50px;
}
div { position: relative; }
.item-left3 {
width: 3px;
height: 3px;
background: #ff0;
}
.item-left2 {
width: 2px;
height: 2px;
background: #ff0;
}
.item-left1 {
width: 3px;
height: 3px;
background: #ff0;
}
.item-explicit {
width: 5px;
height: 5px;
background: #f0f;
}
.item-right1 {
width: 2px;
height: 2px;
background: #0ff;
}
.item-right2 {
width: 3px;
height: 3px;
background: #0ff;
}
.item-right3 {
width: 2px;
height: 2px;
background: #0ff;
}
#zero .item-explicit {
width: 2px;
height: 2px;
}
#two .item-explicit {
width: 10px;
height: 10px;
}
#three .item-explicit {
width: 15px;
height: 15px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="zero">
<div>
<div class="item-right1"></div>
</div>
<div>
<div class="item-right1"></div>
<div class="item-right2" style="left:2px;"></div>
</div>
<div>
<div class="item-right1"></div>
<div class="item-right2" style="left:2px;"></div>
<div class="item-right3" style="left:5px;"></div>
</div>
<div>
<div class="item-left1"></div>
<div class="item-explicit" style="left:3px;"></div>
</div>
<div>
<div class="item-left1"></div>
<div class="item-right1" style="left:3px;"></div>
</div>
<div>
<div class="item-left1"></div>
<div class="item-right1" style="left:3px;"></div>
<div class="item-right2" style="left:5px;"></div>
</div>
<div>
<div class="item-left1"></div>
<div class="item-right1" style="left:3px;"></div>
<div class="item-right2" style="left:5px;"></div>
<div class="item-right3" style="left:8px;"></div>
</div>
<div>
<div class="item-left2"></div>
<div class="item-left1" style="left:2px;"></div>
<div class="item-explicit" style="left:5px;"></div>
</div>
<div>
<div class="item-left2"></div>
<div class="item-left1" style="left:2px;"></div>
<div class="item-right1" style="left:5px;"></div>
</div>
<div>
<div class="item-left2"></div>
<div class="item-left1" style="left:2px;"></div>
<div class="item-right1" style="left:5px;"></div>
<div class="item-right2" style="left:7px;"></div>
</div>
<div>
<div class="item-left2"></div>
<div class="item-left1" style="left:2px;"></div>
<div class="item-right1" style="left:5px;"></div>
<div class="item-right2" style="left:7px;"></div>
<div class="item-right3" style="left:10px;"></div>
</div>
<div>
<div class="item-left3"></div>
<div class="item-left2" style="left:3px;"></div>
<div class="item-left1" style="left:5px;"></div>
<div class="item-explicit" style="left:8px;"></div>
</div>
<div>
<div class="item-left3"></div>
<div class="item-left2" style="left:3px;"></div>
<div class="item-left1" style="left:5px;"></div>
<div class="item-right1" style="left:8px;"></div>
</div>
<div>
<div class="item-left3"></div>
<div class="item-left2" style="left:3px;"></div>
<div class="item-left1" style="left:5px;"></div>
<div class="item-right1" style="left:8px;"></div>
<div class="item-right2" style="left:10px;"></div>
</div>
<div>
<div class="item-left3"></div>
<div class="item-left2" style="left:3px;"></div>
<div class="item-left1" style="left:5px;"></div>
<div class="item-right1" style="left:8px;"></div>
<div class="item-right2" style="left:10px;"></div>
<div class="item-right3" style="left:13px;"></div>
</div>
</div>
<div id="one">
<div>
<div class="item-explicit"></div>
<div class="item-right1" style="left:5px;"></div>
</div>
<div>
<div class="item-explicit"></div>
<div class="item-right1" style="left:5px;"></div>
<div class="item-right2" style="left:7px;"></div>
</div>
<div>
<div class="item-explicit"></div>
<div class="item-right1" style="left:5px;"></div>
<div class="item-right2" style="left:7px;"></div>
<div class="item-right3" style="left:10px;"></div>
</div>
<div>
<div class="item-left1"></div>
<div class="item-explicit" style="left:3px;"></div>
</div>
<div>
<div class="item-left1"></div>
<div class="item-explicit" style="left:3px;"></div>
<div class="item-right1" style="left:8px;"></div>
</div>
<div>
<div class="item-left1"></div>
<div class="item-explicit" style="left:3px;"></div>
<div class="item-right1" style="left:8px;"></div>
<div class="item-right2" style="left:10px;"></div>
</div>
<div>
<div class="item-left1"></div>
<div class="item-explicit" style="left:3px;"></div>
<div class="item-right1" style="left:8px;"></div>
<div class="item-right2" style="left:10px;"></div>
<div class="item-right3" style="left:13px;"></div>
</div>
<div>
<div class="item-left2"></div>
<div class="item-left1" style="left:2px;"></div>
<div class="item-explicit" style="left:5px;"></div>
</div>
<div>
<div class="item-left2"></div>
<div class="item-left1" style="left:2px;"></div>
<div class="item-explicit" style="left:5px;"></div>
<div class="item-right1" style="left:10px;"></div>
</div>
<div>
<div class="item-left2"></div>
<div class="item-left1" style="left:2px;"></div>
<div class="item-explicit" style="left:5px;"></div>
<div class="item-right1" style="left:10px;"></div>
<div class="item-right2" style="left:12px;"></div>
</div>
<div>
<div class="item-left2"></div>
<div class="item-left1" style="left:2px;"></div>
<div class="item-explicit" style="left:5px;"></div>
<div class="item-right1" style="left:10px;"></div>
<div class="item-right2" style="left:12px;"></div>
<div class="item-right3" style="left:15px;"></div>
</div>
<div>
<div class="item-left3"></div>
<div class="item-left2" style="left:3px;"></div>
<div class="item-left1" style="left:5px;"></div>
<div class="item-explicit" style="left:8px;"></div>
</div>
<div>
<div class="item-left3"></div>
<div class="item-left2" style="left:3px;"></div>
<div class="item-left1" style="left:5px;"></div>
<div class="item-explicit" style="left:8px;"></div>
<div class="item-right1" style="left:13px;"></div>
</div>
<div>
<div class="item-left3"></div>
<div class="item-left2" style="left:3px;"></div>
<div class="item-left1" style="left:5px;"></div>
<div class="item-explicit" style="left:8px;"></div>
<div class="item-right1" style="left:13px;"></div>
<div class="item-right2" style="left:15px;"></div>
</div>
<div>
<div class="item-left3"></div>
<div class="item-left2" style="left:3px;"></div>
<div class="item-left1" style="left:5px;"></div>
<div class="item-explicit" style="left:8px;"></div>
<div class="item-right1" style="left:13px;"></div>
<div class="item-right2" style="left:15px;"></div>
<div class="item-right3" style="left:18px;"></div>
</div>
</div>
<div id="two">
<div>
<div class="item-explicit"></div>
<div class="item-right1" style="left:10px;"></div>
</div>
<div>
<div class="item-explicit"></div>
<div class="item-right1" style="left:10px;"></div>
<div class="item-right2" style="left:12px;"></div>
</div>
<div>
<div class="item-explicit"></div>
<div class="item-right1" style="left:10px;"></div>
<div class="item-right2" style="left:12px;"></div>
<div class="item-right3" style="left:15px;"></div>
</div>
<div>
<div class="item-left1"></div>
<div class="item-explicit" style="left:3px;"></div>
</div>
<div>
<div class="item-left1"></div>
<div class="item-explicit" style="left:3px;"></div>
<div class="item-right1" style="left:13px;"></div>
</div>
<div>
<div class="item-left1"></div>
<div class="item-explicit" style="left:3px;"></div>
<div class="item-right1" style="left:13px;"></div>
<div class="item-right2" style="left:15px;"></div>
</div>
<div>
<div class="item-left1"></div>
<div class="item-explicit" style="left:3px;"></div>
<div class="item-right1" style="left:13px;"></div>
<div class="item-right2" style="left:15px;"></div>
<div class="item-right3" style="left:18px;"></div>
</div>
<div>
<div class="item-left2"></div>
<div class="item-left1" style="left:2px;"></div>
<div class="item-explicit" style="left:5px;"></div>
</div>
<div>
<div class="item-left2"></div>
<div class="item-left1" style="left:2px;"></div>
<div class="item-explicit" style="left:5px;"></div>
<div class="item-right1" style="left:15px;"></div>
</div>
<div>
<div class="item-left2"></div>
<div class="item-left1" style="left:2px;"></div>
<div class="item-explicit" style="left:5px;"></div>
<div class="item-right1" style="left:15px;"></div>
<div class="item-right2" style="left:17px;"></div>
</div>
<div>
<div class="item-left2"></div>
<div class="item-left1" style="left:2px;"></div>
<div class="item-explicit" style="left:5px;"></div>
<div class="item-right1" style="left:15px;"></div>
<div class="item-right2" style="left:17px;"></div>
<div class="item-right3" style="left:20px;"></div>
</div>
<div>
<div class="item-left3"></div>
<div class="item-left2" style="left:3px;"></div>
<div class="item-left1" style="left:5px;"></div>
<div class="item-explicit" style="left:8px;"></div>
</div>
<div>
<div class="item-left3"></div>
<div class="item-left2" style="left:3px;"></div>
<div class="item-left1" style="left:5px;"></div>
<div class="item-explicit" style="left:8px;"></div>
<div class="item-right1" style="left:18px;"></div>
</div>
<div>
<div class="item-left3"></div>
<div class="item-left2" style="left:3px;"></div>
<div class="item-left1" style="left:5px;"></div>
<div class="item-explicit" style="left:8px;"></div>
<div class="item-right1" style="left:18px;"></div>
<div class="item-right2" style="left:20px;"></div>
</div>
<div>
<div class="item-left3"></div>
<div class="item-left2" style="left:3px;"></div>
<div class="item-left1" style="left:5px;"></div>
<div class="item-explicit" style="left:8px;"></div>
<div class="item-right1" style="left:18px;"></div>
<div class="item-right2" style="left:20px;"></div>
<div class="item-right3" style="left:23px;"></div>
</div>
</div>
<div id="three">
<div>
<div class="item-explicit"></div>
<div class="item-right1" style="left:15px;"></div>
</div>
<div>
<div class="item-explicit"></div>
<div class="item-right1" style="left:15px;"></div>
<div class="item-right2" style="left:17px;"></div>
</div>
<div>
<div class="item-explicit"></div>
<div class="item-right1" style="left:15px;"></div>
<div class="item-right2" style="left:17px;"></div>
<div class="item-right3" style="left:20px;"></div>
</div>
<div>
<div class="item-left1"></div>
<div class="item-explicit" style="left:3px;"></div>
</div>
<div>
<div class="item-left1"></div>
<div class="item-explicit" style="left:3px;"></div>
<div class="item-right1" style="left:18px;"></div>
</div>
<div>
<div class="item-left1"></div>
<div class="item-explicit" style="left:3px;"></div>
<div class="item-right1" style="left:18px;"></div>
<div class="item-right2" style="left:20px;"></div>
</div>
<div>
<div class="item-left1"></div>
<div class="item-explicit" style="left:3px;"></div>
<div class="item-right1" style="left:18px;"></div>
<div class="item-right2" style="left:20px;"></div>
<div class="item-right3" style="left:23px;"></div>
</div>
<div>
<div class="item-left2"></div>
<div class="item-left1" style="left:2px;"></div>
<div class="item-explicit" style="left:5px;"></div>
</div>
<div>
<div class="item-left2"></div>
<div class="item-left1" style="left:2px;"></div>
<div class="item-explicit" style="left:5px;"></div>
<div class="item-right1" style="left:20px;"></div>
</div>
<div>
<div class="item-left2"></div>
<div class="item-left1" style="left:2px;"></div>
<div class="item-explicit" style="left:5px;"></div>
<div class="item-right1" style="left:20px;"></div>
<div class="item-right2" style="left:22px;"></div>
</div>
<div>
<div class="item-left2"></div>
<div class="item-left1" style="left:2px;"></div>
<div class="item-explicit" style="left:5px;"></div>
<div class="item-right1" style="left:20px;"></div>
<div class="item-right2" style="left:22px;"></div>
<div class="item-right3" style="left:25px;"></div>
</div>
<div>
<div class="item-left3"></div>
<div class="item-left2" style="left:3px;"></div>
<div class="item-left1" style="left:5px;"></div>
<div class="item-explicit" style="left:8px;"></div>
</div>
<div>
<div class="item-left3"></div>
<div class="item-left2" style="left:3px;"></div>
<div class="item-left1" style="left:5px;"></div>
<div class="item-explicit" style="left:8px;"></div>
<div class="item-right1" style="left:23px;"></div>
</div>
<div>
<div class="item-left3"></div>
<div class="item-left2" style="left:3px;"></div>
<div class="item-left1" style="left:5px;"></div>
<div class="item-explicit" style="left:8px;"></div>
<div class="item-right1" style="left:23px;"></div>
<div class="item-right2" style="left:25px;"></div>
</div>
<div>
<div class="item-left3"></div>
<div class="item-left2" style="left:3px;"></div>
<div class="item-left1" style="left:5px;"></div>
<div class="item-explicit" style="left:8px;"></div>
<div class="item-right1" style="left:23px;"></div>
<div class="item-right2" style="left:25px;"></div>
<div class="item-right3" style="left:28px;"></div>
</div>
</div>
</div>
</body>
</html>
Codebase Browser
chromium