2b:null 2c:["$","title",null,{"children":"CSS Grid course notebook | Forrest O. | Observable"}] 31:Ta80,html`

Album Title

Artist Name

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum sed sint doloremque repellat, iste debitis.

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Facilis, excepturi!

Album Title

Artist Name

short.

Album Title

Artist Name

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum sed sint doloremque repellat, iste debitis.

Album Title

Artist Name

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum sed sint doloremque repellat, iste debitis.

Album Title

Artist Name

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum sed sint doloremque repellat, iste debitis.

Album Title

Artist Name

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum sed sint doloremque repellat, iste debitis.

`32:[] 2f:{"id":"61b166190981daf7","slug":"css-grid-course-notebook","title":"CSS Grid course notebook","thumbnail":"748afc002918b5bc9506bda2a6fb1183407be856131bda2c42e8f990986c515e","access_level":"public","create_time":"$D2018-02-22T15:15:58.634Z","update_time":"$D2018-02-23T20:59:40.534Z","view_time":null,"first_public_time":"$D2018-02-22T21:53:34.584Z","fork":false,"stars":8,"starred":false,"owner":{"type":"team","id":"f9abb147dc0e6dcd","login":"forresto","name":"Forrest O.","avatar_url":"https://avatars-next.observableusercontent.com/c22671040121cb9b9d22913e2eb0ffc4d65d3e535cda1133d6655f1d63b32e3f","tier":"starter_2024"},"version":616,"publish_version":616,"role":null,"authored":false,"authors":[{"type":"individual","id":"b16dd1586d4d1422","login":"forresto","name":"Forrest O.","avatar_url":"https://avatars-next.observableusercontent.com/c22671040121cb9b9d22913e2eb0ffc4d65d3e535cda1133d6655f1d63b32e3f","tier":null}],"members":[{"type":"individual","id":"b16dd1586d4d1422","login":"forresto","name":"Forrest O.","avatar_url":"https://avatars-next.observableusercontent.com/c22671040121cb9b9d22913e2eb0ffc4d65d3e535cda1133d6655f1d63b32e3f","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":4,"collection":null,"type":"notebook","body":{"title":"CSS Grid course notebook","cells":[{"id":0,"value":"md`# CSS Grid course notebook\n\nFollowing https://cssgrid.io/\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4,"value":"function oneDiv (hue = 0, text, style = '') {\n const div = DOM.element('div', {style: `text-align: center; color: white; background-color: hsl(${hue}, 100%, 50%); padding: 5px; ${style}`})\n div.textContent = text;\n return div;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8,"value":"red = oneDiv(0, 'red')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":15,"value":"rainbow = html`

${[0, 60, 120, 180, 240, 300].map(oneDiv)}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":28,"value":"rainbowFlex = html`

${[0, 60, 120, 180, 240, 300].map(\n (hue, i) => oneDiv(hue, i, 'flex-grow: 1;')\n)}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":72,"value":"hues = [0, 30, 60, 90, 120, 150, 180, 210, 240, 270, 300, 330]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":43,"value":"rainbowGrid = html`

${hues.map(oneDiv)}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":49,"value":"gridGap = html`

${hues.map(oneDiv)}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":61,"value":"autoCol = html`

${[0, 30, 60, 90, 120, 150, 180, 210, 240, 270, 300, 330].map(oneDiv)}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":66,"value":"repeatCol = html`

${[0, 30, 60, 90, 120, 150, 180, 210, 240, 270, 300, 330].map(oneDiv)}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":79,"value":"gridTemplateRows = html`

${hues.map(oneDiv)}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":91,"value":"md`# CSS Grid Implicit vs Explicit Tracks`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":94,"value":"html`

${hues.map(oneDiv)}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":107,"value":"md`# CSS grid-auto-flow Explained`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":109,"value":"html`

${hues.map(oneDiv)}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":121,"value":"md`# Sizing tracks in CSS Grid`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":123,"value":"html`

${hues.map(oneDiv)}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":144,"value":"md`# CSS Grid repeat function`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":146,"value":"html`

${hues.map(oneDiv)}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":153,"value":"md`# 09 Sizing Grid Items`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":169,"value":"hues2 = hues.concat(hues)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":156,"value":"html`

${hues2.map(\n\t(hue, i) => oneDiv(hue, i, (i%2===0 ? 'grid-column: span 2' : 'grid-row: span 2'))\n)}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":172,"value":"md`# 10 Placing Grid Items`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":175,"value":"html`

${hues.map(oneDiv).concat(\n oneDiv(360, '🛎', `\n\tgrid-column: 2 / span 2;\n\tgrid-row: 2 / span 2;\n `)\n)}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":195,"value":"html`

${hues.map(oneDiv).concat(\n oneDiv(360, '🛎', `\n\tgrid-column: span 2;\n\tgrid-row: 1 / span 2;\n `)\n)}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":200,"value":"md`# 11 Spanning and Placing Cardio\n\nMake the grid 10 columns wide, every other taking up twice the free space\n\nMake the grid have 10 explicit rows, 50px high each\n\n /* With Item 1, start at col 3 and go until 5 */\n /* With Item 2, start at col 5 and go until the end */\n /* Make Item 5 double span 2 cols and rows */\n /* Make Item 8 two rows high */\n /* Make Item 15 span the entire grid width */\n /* Make item 18 span 4 widths, but end 9 */\n /* Make item 20 start at row 4 and go for 3 */\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":211,"value":"hues4 = hues2.concat(hues2)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":214,"value":"hues8 = hues4.concat(hues4)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":202,"value":"html`

${hues4.map(\n (hue, i) => {\n if (i === 0) return oneDiv(hue, 'Item 1', 'grid-column: 3 / 5;');\n if (i === 1) return oneDiv(hue, 'Item 2', 'grid-column: 5 / -1;');\n if (i === 4) return oneDiv(hue, 'Item 5', 'grid-column: span 2; grid-row: span 2;');\n if (i === 7) return oneDiv(hue, 'Item 8', 'grid-row: span 2;');\n if (i === 14) return oneDiv(hue, 'Item 15', 'grid-column: 1 / -1;');\n if (i === 17) return oneDiv(hue, 'Item 18', 'grid-column: span 4 / 9;');\n if (i === 19) return oneDiv(hue, 'Item 20', 'grid-column: 4 / span 3;');\n return oneDiv(hue, i+1);\n }\n)}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":259,"value":"md`# 12 auto-fit and auto-fill`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":261,"value":"html`

${hues.slice(0, 4).map(\n (hue, i) => {\n if (i === 3) return oneDiv(hue, 'Item 3', 'grid-column-end: -1;');\n return oneDiv(hue, 'Item'+(i+1));\n }\n)}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":273,"value":"md`# 13 Using minmax() for Responsive Grids`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":271,"value":"autoFill = html`

${hues.slice(0, 4).map(\n (hue, i) => {\n return oneDiv(hue, 'Item'+(i+1));\n }\n)}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":278,"value":"autoFit = html`

${hues.slice(0, 4).map(\n (hue, i) => {\n return oneDiv(hue, 'Item'+(i+1));\n }\n)}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":287,"value":"fitContent = html`

${hues.slice(0, 4).map(\n (hue, i) => {\n return oneDiv(hue, 'Item '+(i+1));\n }\n)}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":294,"value":"md`# 14 Grid Template Areas`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":296,"value":"html`

${hues.slice(0, 5).map(\n (hue, i) => {\n if (i === 0) return oneDiv(hue, \"Sidebar #1\", \"grid-area: sb1;\")\n if (i === 1) return oneDiv(hue, \"Content: moves to top on small screens\", \"grid-area: content;\")\n if (i === 4) return oneDiv(hue, \"Footer\", \"grid-area: footer;\")\n return oneDiv(hue, 'Item ' + (i+1));\n }\n)}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":321,"value":"responsiveTemplateAreas = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":336,"value":"html`

${hues2.map(\n (hue, i) => {\n if (i === 0) return oneDiv(hue, \"😻 area\", \"grid-area: 😻;\")\n if (i === 1) return oneDiv(hue, \"🛎 rows\", \"grid-row: 🛎-start / 🛎-end;\")\n if (i === 10) return oneDiv(hue, \"😻 cols\", \"grid-column: 😻-start / 😻-end;\")\n if (i === 23) return oneDiv(hue, \"🛎 line\", \"grid-column: 🛎-start / 🛎-end;\")\n return oneDiv(hue, 'Item ' + (i+1));\n }\n)}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":362,"value":"md`# 15 Naming Lines in CSS Grid`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":376,"value":"html`

${hues2.map(\n (hue, i) => {\n if (i === 2) return oneDiv(hue, 'Item 3', 'grid-column: 2; grid-row: site-top / site-bottom');\n return oneDiv(hue, i+1);\n }\n)}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":391,"value":"md`# 16 grid-auto-flow dense Block Fitting`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":393,"value":"html`

${hues2.map(\n (hue, i) => {\n if (i % 6 === 0) return oneDiv(hue, 'Item'+(i+1), 'grid-column: span 6;');\n return oneDiv(hue, i+1);\n }\n)}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":399,"value":"html`

${hues2.map(\n (hue, i) => {\n if (i > 0 && i % 6 === 0) return oneDiv(hue, 'Item'+(i+1), 'grid-column: span 6;');\n if (i > 0 && i % 8 === 0) return oneDiv(hue, 'Item'+(i+1), 'grid-column: span 2;');\n if (i > 0 && i % 9 === 0) return oneDiv(hue, 'Item'+(i+1), 'grid-row: span 2;');\n if (i === 17) return oneDiv(hue, 'Item'+(i+1), 'grid-column-end: -1;');\n return oneDiv(hue, i+1);\n }\n)}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":415,"value":"md`# 17 CSS Grid Alignment + Centering`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":420,"value":"html`

${hues2.map(\n (hue, i) => {\n if (i === 4) return oneDiv(hue, 'start', 'justify-self: start;');\n if (i === 5) return oneDiv(hue, 'end', 'justify-self: end;');\n if (i === 6) return oneDiv(hue, 'center', 'justify-self: stretch;');\n if (i === 7) return oneDiv(hue, 'stretch', 'justify-self: stretch;');\n if (i === 16) return oneDiv(hue, 'start', 'align-self: start;');\n if (i === 17) return oneDiv(hue, 'end', 'align-self: end;');\n if (i === 18) return oneDiv(hue, 'center', 'align-self: stretch;');\n if (i === 19) return oneDiv(hue, 'stretch', 'align-self: stretch;');\n return oneDiv(hue, i+1);\n }\n)}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":449,"value":"md`# 18 Re-ordering Grid Items`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":453,"value":"html`

${hues.slice(0,3).map(\n (hue, i) => {\n if (i === 0) return oneDiv(hue, 'Item '+(i+1), 'order: 3;');\n if (i === 1) return oneDiv(hue, 'Item '+(i+1), 'order: 2;');\n if (i === 2) return oneDiv(hue, 'Item '+(i+1), 'order: 1; grid-column: 1 / -1;');\n return oneDiv(hue, i+1);\n }\n)}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":468,"value":"md`# 19 Nesting Grid with Album Layouts`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":474,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":532,"value":"md`# 20 CSS Grid Image Gallery\n\n\\`grid-auto-flow: dense;\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":548,"value":"randomInt = (min, max) => Math.floor(Math.random() * (max - min)) + min","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":538,"value":"oneImg = id => {\n const w = randomInt(1, 3);\n const h = randomInt(1, 3)\n return DOM.element('img', {\n \tsrc: `https://source.unsplash.com/random/${w*100}x${h*100}?v=${id}`,\n\tstyle: `\n width: 100%;\n\t height: 100%;\n object-fit: cover;\n grid-column: span ${w};\n grid-row: span ${h};\n `\n })\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":580,"value":"md`Press ▶︎ for a new layout:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":535,"value":"html`

${[1,2,3,4,5,6,7,8,9,10,11,12].map(oneImg)}

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"