grid-gap-decorations-082.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /css/css-gaps/grid/grid-gap-decorations-082.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<title>

  CSS Gap Decorations: donut-shaped 4x3 grid with rule-visibility-items: between

  and overlap-join. Corner item decorations join at interior intersections while

  dangling endpoints at empty cells remain flush.

</title>

<link rel="help" href="https://drafts.csswg.org/css-gaps-1/">

<link rel="match" href="grid-gap-decorations-082-ref.html">

<link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com">

<style>

body {

  margin: 0;

.container {

  display: grid;

  grid-template: repeat(3, 100px) / repeat(4, 100px);

  gap: 20px;

  rule: 6px solid;

  column-rule-color: rgba(128 0 0 / 0.5);

  row-rule-color: rgba(0 0 128 / 0.5);

  padding: 10px;

  rule-visibility-items: between;

  rule-inset: overlap-join;

.item {

  background: rgba(192 192 192 / 0.75);

</style>

<div class="container">

  <div class="item" style="grid-area: 1/1">A</div>

  <div class="item" style="grid-area: 1/2">B</div>

  <div class="item" style="grid-area: 1/3">C</div>

  <div class="item" style="grid-area: 1/4">D</div>

  <div class="item" style="grid-area: 2/1">E</div>

  <div class="item" style="grid-area: 2/4">F</div>

  <div class="item" style="grid-area: 3/1">G</div>

  <div class="item" style="grid-area: 3/2">H</div>

  <div class="item" style="grid-area: 3/3">I</div>

  <div class="item" style="grid-area: 3/4">J</div>

</div>