{
  "$schema": "https://raw.githubusercontent.com/guitaripod/wwdc-sessions/master/schema/session.schema.json",
  "schemaVersion": 1,
  "id": "wwdc2026-314",
  "event": "wwdc2026",
  "eventName": "WWDC26",
  "year": 2026,
  "eventContentId": 314,
  "title": "Learn CSS Grid Lanes",
  "description": "Build adaptive web layouts that embrace content of all shapes and sizes. Explore how Grid Lanes lets you arrange differently-shaped elements into clean, flexible designs with simple CSS. And find out how flow-tolerance helps you refine accessibility while keeping your layouts malleable.",
  "url": "https://developer.apple.com/videos/play/wwdc2026/314",
  "sosumiURL": "https://sosumi.ai/videos/play/wwdc2026/314",
  "type": "Video",
  "publishedAt": "2026-06-08T14:00:00-07:00",
  "platforms": [
    "iOS",
    "iPadOS",
    "macOS",
    "visionOS",
    "watchOS"
  ],
  "keywords": [],
  "topics": [
    "Design",
    "Safari & Web"
  ],
  "primaryTopic": "Safari & Web",
  "duration": 625,
  "hasTranscript": true,
  "transcriptWordCount": 1589,
  "availableLanguages": [
    "eng",
    "fra",
    "jpn",
    "kor",
    "por",
    "spa",
    "zho"
  ],
  "media": {
    "hls": "https://devstreaming-cdn.apple.com/videos/wwdc/2026/314/4/72928edd-5728-4010-b8f0-27f1a7bdec8c/cmaf.m3u8",
    "downloadHLS": "https://devstreaming-cdn.apple.com/videos/wwdc/2026/314/4/72928edd-5728-4010-b8f0-27f1a7bdec8c/cmaf-download.m3u8",
    "downloadSD": "https://devstreaming-cdn.apple.com/videos/wwdc/2026/314/4/72928edd-5728-4010-b8f0-27f1a7bdec8c/downloads/wwdc2026-314_sd.mp4",
    "downloadHD": "https://devstreaming-cdn.apple.com/videos/wwdc/2026/314/4/72928edd-5728-4010-b8f0-27f1a7bdec8c/downloads/wwdc2026-314_hd.mp4",
    "duration": 625
  },
  "codeSnippets": [
    {
      "title": "Create a Grid Lanes Container",
      "language": "javascript",
      "startTimeSeconds": 238,
      "code": ".container {\n\tdisplay: grid-lanes;\n}"
    },
    {
      "title": "Create a Grid Lanes Container",
      "language": "javascript",
      "startTimeSeconds": 242,
      "code": ".container {\n\tdisplay: grid-lanes;\n  grid-template-columns: repeat(3, 1fr);\n}"
    },
    {
      "title": "Create a Grid Lanes Container",
      "language": "javascript",
      "startTimeSeconds": 266,
      "code": ".container {\n\tdisplay: grid-lanes;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 10px;\n}"
    },
    {
      "title": "Implement a Brick Variation",
      "language": "javascript",
      "startTimeSeconds": 273,
      "code": ".container {\n\tdisplay: grid-lanes;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 10px;\n}"
    },
    {
      "title": "Implement a Brick Variation",
      "language": "javascript",
      "startTimeSeconds": 276,
      "code": ".container {\n\tdisplay: grid-lanes;\n  grid-template-rows: repeat(3, 1fr);\n  gap: 10px;\n}"
    },
    {
      "title": "Experiment with different layouts",
      "language": "javascript",
      "startTimeSeconds": 298,
      "code": ".container {\n\tdisplay: grid-lanes;\n  grid-template-columns: 1fr 1fr 1fr;\n  gap: 10px;\n}"
    },
    {
      "title": "Experiment with different layouts",
      "language": "javascript",
      "startTimeSeconds": 302,
      "code": ".container {\n\tdisplay: grid-lanes;\n  grid-template-columns: 1fr 2fr 1fr;\n  gap: 10px;\n}"
    },
    {
      "title": "Experiment with different layouts",
      "language": "javascript",
      "startTimeSeconds": 310,
      "code": ".container {\n\tdisplay: grid-lanes;\n  grid-template-columns:\n    repeat(auto-fill,\n      minmax(200px, 1fr));\n  gap: 10px;\n}"
    },
    {
      "title": "Experiment with different layouts",
      "language": "javascript",
      "startTimeSeconds": 324,
      "code": ".container {\n\tdisplay: grid-lanes;\n  grid-template-columns:\n    repeat(auto-fill,\n      minmax(8rem, 1fr)\n      minmax(14rem, 2fr);\n  gap: 10px;\n}"
    },
    {
      "title": "Control Individual Items",
      "language": "javascript",
      "startTimeSeconds": 345,
      "code": ".container {\n\tdisplay: grid-lanes;\n  grid-template-columns: 1fr 1fr 1fr;\n  gap: 10px;\n}"
    },
    {
      "title": "Control Individual Items",
      "language": "javascript",
      "startTimeSeconds": 359,
      "code": ".container {\n\tdisplay: grid-lanes;\n  grid-template-columns: 1fr 1fr 1fr;\n  gap: 10px;\n}\n\n.item {\n  grid-column: span 2;\n}"
    },
    {
      "title": "Control Individual Items",
      "language": "javascript",
      "startTimeSeconds": 367,
      "code": ".container {\n\tdisplay: grid-lanes;\n  grid-template-columns: 1fr 1fr 1fr;\n  gap: 10px;\n}\n\n.item {\n  grid-column: 2 / span 2;\n}"
    },
    {
      "title": "Integrate Subgrid",
      "language": "javascript",
      "startTimeSeconds": 382,
      "code": ".container {\n\tdisplay: grid-lanes;\n  grid-template-columns: 1fr 1fr 1fr;\n  gap: 10px;\n}\n\n.item {\n  grid-column: span 2;\n}"
    },
    {
      "title": "Integrate Subgrid",
      "language": "javascript",
      "startTimeSeconds": 394,
      "code": ".container {\n\tdisplay: grid-lanes;\n  grid-template-columns: 1fr 1fr 1fr;\n  gap: 10px;\n}\n\n.item {\n  display: grid-lanes;\n  grid-template-columns: subgrid;\n  grid-column: span 2;\n}"
    },
    {
      "title": "Integrate Subgrid",
      "language": "javascript",
      "startTimeSeconds": 408,
      "code": ".container {\n\tdisplay: grid-lanes;\n  grid-template-columns: 1fr 1fr 1fr;\n  gap: 10px;\n}\n\n.item {\n  display: grid;\n  grid-template-columns: subgrid;\n  grid-column: span 2;\n}"
    },
    {
      "title": "Improve item positioning",
      "language": "javascript",
      "startTimeSeconds": 517,
      "code": ".container {\n\tdisplay: grid-lanes;\n  grid-template-columns: 1fr 1fr;\n  gap: 10px;\n  flow-tolerance: normal;\n}"
    },
    {
      "title": "Improve item positioning",
      "language": "javascript",
      "startTimeSeconds": 521,
      "code": ".container {\n\tdisplay: grid-lanes;\n  grid-template-columns: 1fr 1fr;\n  gap: 10px;\n  flow-tolerance: 2.1em;\n}"
    }
  ],
  "resources": [
    {
      "title": "WebKit.org - CSS Grid Lanes Field Guide",
      "url": "https://gridlanes.webkit.org",
      "type": "documentation",
      "description": "The field guide to CSS Grid Lanes — masonry layouts in pure CSS, no JavaScript required. Syntax reference, property guide, and interactive demos."
    },
    {
      "title": "WebKit.org – Report issues to the WebKit open-source project",
      "url": "https://bugs.webkit.org",
      "type": "documentation",
      "description": "Bug tracking for WebKit open source project"
    },
    {
      "title": "Submit feedback",
      "url": "http://feedbackassistant.apple.com",
      "type": "documentation",
      "description": null
    }
  ],
  "path": "sessions/wwdc2026/314-learn-css-grid-lanes/",
  "files": {
    "metadata": "sessions/wwdc2026/314-learn-css-grid-lanes/metadata.json",
    "readme": "sessions/wwdc2026/314-learn-css-grid-lanes/README.md",
    "transcript": "sessions/wwdc2026/314-learn-css-grid-lanes/transcript.md",
    "transcriptJSON": "sessions/wwdc2026/314-learn-css-grid-lanes/transcript.json"
  }
}