{
  "$type": "site.standard.document",
  "bskyPostRef": {
    "cid": "bafyreibtjmtlzx4fjidhzrqyn5kmjizwfyuvwdy3ro7752677gz4vpfbfi",
    "uri": "at://did:plc:l3e5dwh76s56uxyxr36ic3eo/app.bsky.feed.post/3mlhlidji5sz2"
  },
  "coverImage": {
    "$type": "blob",
    "ref": {
      "$link": "bafkreigut4cal6wcmmg2hbd5tk5lrw3ede2xdouwv3m6qeudoto2zzv7m4"
    },
    "mimeType": "image/png",
    "size": 95512
  },
  "path": "/blog/css-grid-gap-decoration",
  "publishedAt": "2026-05-08T11:34:00.000Z",
  "site": "https://azukiazusa.dev",
  "textContent": "グリッドレイアウトで「列の間に線を引く」といった装飾は多くの場面で必要になります。しかし、flexbox や grid で列の間に線を引くためのプロパティは存在せず、ボーダーや背景色を利用して線のように見せるといったワークアラウンドが必要でした。CSS Grid Layout の gap を装飾する `column-rule` と `row-rule` を使用することにより、flexbox や grid で簡単に列や行の間に線を引くことができるようになります。",
  "title": "CSS Grid Layout の gap を装飾する `column-rule` と `row-rule`"
}