Source code
Revision control
Copy as Markdown
Other Tools
<!doctype html>
<!--
Any copyright is dedicated to the Public Domain.
-->
<title>Examples of rule overflow and clipping.</title>
<style>
html,body {
color:black; background-color:white; font:20px/1 monospace;
}
.grid {
position: relative;
display: inline-grid;
grid-template-columns: 2ch 2ch;
gap: 20px;
column-rule: 6px solid blue;
column-rule-longitudinal-edge-inset: min(-100vw, -100vh);
row-rule: 6px solid lime;
row-rule-longitudinal-edge-inset: min(-100vw, -100vh);
border: 4px dotted;
margin: 30px;
padding: 1ch;
background: lightgrey;
}
.test2 { overflow: hidden; }
x {
block-size: 48px;
background: grey;
}
pre {
font-size: 10px;
}
</style>
<body>
<pre>Both grids have '*-edge-inset: min(-100vw, -100vh)'.
The right grid has 'overflow: hidden' which clips its rules at the padding edge.</pre>
<div class="grid test1"><x>1</x><x>2</x><x>3</x><x>4</x></div>
<div class="grid test2" style="top:100px "><x>1</x><x>2</x><x>3</x><x>4</x></div>
</body>