Source code
Revision control
Copy as Markdown
Other Tools
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<style>
/* Reference: draw each grid item as an absolutely positioned box so the layout
never touches grid track sizing. The padding is each calc() resolved against
the 150px grid area inline size (2% == 3px), hardcoded here in px.
box-sizing: border-box keeps the padding inside the 150px cell, matching a
stretched grid item, so content lands at (paddingLeft, paddingTop). */
.grid {
position: relative;
width: 300px;
height: 300px;
background-color: green;
}
.item {
position: absolute;
box-sizing: border-box;
width: 150px;
height: 150px;
background-color: blue;
}
.topLeft {
left: 0;
top: 0;
padding: 5px 8px 11px 14px;
}
.topRight {
left: 150px;
top: 0;
padding: 13px;
}
.bottomLeft {
left: 0;
top: 150px;
padding: 19px 10px;
}
.bottomRight {
left: 150px;
top: 150px;
padding: 15px;
}
.topLeftContent {
width: 20px;
height: 20px;
background-color: purple;
}
.topRightContent {
width: 20px;
height: 40px;
background-color: purple;
}
.bottomLeftContent {
width: 40px;
height: 20px;
background-color: purple;
}
.bottomRightContent {
width: 40px;
height: 40px;
background-color: purple;
}
</style>
</head>
<body>
<div class="grid">
<div class="item topLeft"><div class="topLeftContent"></div></div>
<div class="item topRight"><div class="topRightContent"></div></div>
<div class="item bottomLeft"><div class="bottomLeftContent"></div></div>
<div class="item bottomRight"><div class="bottomRightContent"></div></div>
</div>
</body>
</html>