2a:null 2b:["$","title",null,{"children":"CSS Grid course notebook | Forrest O. | Observable"}] 30: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.

`31:[] 2e:{"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","has_unpublished_edits":null,"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,"lapsed":null,"subscribed":null,"forks":4,"collection":null,"type":"notebook","body":{"titling":"auto","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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"red = oneDiv(0, 'red')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"rainbow = html`

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

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

${hues.map(oneDiv)}

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

${hues.map(oneDiv)}

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

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

${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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":211,"value":"hues4 = hues2.concat(hues2)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":214,"value":"hues8 = hues4.concat(hues4)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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)}

${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)}

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

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

${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)}

${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)}

${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)}

${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)}

${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)}

${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)}

${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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":468,"value":"md`# 19 Nesting Grid with Album Layouts`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":474,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":548,"value":"randomInt = (min, max) => Math.floor(Math.random() * (max - min)) + min","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":580,"value":"md`Press ▶︎ for a new layout:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1"}} 2f:"$2e:body"