31:T1946,// Copied from https://1linelayouts.glitch.me/ - 2020-09-11 layouts = new Map([ [ '01. Super Centered', { html: `

`, css: ` .parent { display: grid; place-items: center; background: lightblue; width: 500px; height: 500px; resize: both; overflow: auto; } .child { // etc. padding: 0.5rem; border-radius: 10px; border: 1px solid red; background: lightpink; font-size: 2rem; text-align: center; } body { font-family: system-ui, serif; }` } ], [ '02. The Deconstructed Pancake', { html: `

`, css: `.parent { display: flex; flex-wrap: wrap; } .child { /* flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] */ /* If we don't want the items to stretch: */ /*flex: 0 1 300px;*/ /* If we do want the items to stretch:*/ flex: 1 1 300px; // etc. border: 1px solid red; background: lightpink; font-size: 2rem; text-align: center; } body { font-family: system-ui, serif; }` } ], [ `03. Sidebar Says`, { html: `

Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis nulla architecto maxime modi nisi. Quas saepe dolorum, architecto quia fugit nulla! Natus, iure eveniet ex iusto tempora animi quibusdam porro?

`, css: `body { display: grid; grid-template-columns: minmax(150px, 25%) 1fr; padding: 0; margin: 0; } .sidebar { height: 100vh; /* etc.*/ background: lightpink; font-size: 2rem; text-align: center; } .content { padding: 2rem; } body { font-family: system-ui, serif; }` } ], [ `04: Pancake Stack (Header, Main, Footer)`, { html: `

Header.com

`, css: `body { display: grid; height: 100vh; grid-template-rows: auto 1fr auto; } /* etc*/ header { background: lightpink; padding: 2rem; } main { background: coral; } footer { background: wheat; padding: 2rem; text-align: center; } body { font-family: system-ui, sans-serif; }` } ], [ `05: Holy Grail`, { html: `

Header.com

`, css: `body { display: grid; height: 100vh; grid-template: auto 1fr auto / auto 1fr auto } /* etc*/ header { background: lightpink; padding: 2rem; grid-column: 1 / 4; } .left-sidebar { background: lightblue; grid-column: 1 / 2; } main { background: coral; grid-column: 2 / 3; } .right-sidebar { background: yellow; grid-column: 3 / 4; } footer { background: wheat; padding: 2rem; text-align: center; grid-column: 1 / 4; } body { font-family: system-ui, sans-serif; } .left-sidebar, .right-sidebar { padding: 1rem; }` } ], [ `06: 12-Span Grid`, { html: `

Span 12

Span 6

Span 4

Span 2

`, css: `body { display: grid; height: 100vh; grid-template-columns: repeat(12, 1fr); } /* etc*/ div { display: grid; place-items: center; } .span-12 { background: lightpink; grid-column: 1 / 13; } .span-6 { background: lightblue; grid-column: 1 / 7; } .span-4 { background: coral; grid-column: 4 / 9; } .span-2 { background: yellow; grid-column: 3 / 5; } body { font-family: system-ui, sans-serif; }` } ], [ `07: RAM (Repeat, Auto, Minmax)`, { html: `

`, css: `body { display: grid; height: 100vh; grid-gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } /* etc*/ div { display: grid; place-items: center; background: lightpink; } body { font-family: system-ui, sans-serif; }` } ], [ `08: Line It Up!`, { html: `

Title - Card 1

Medium length description. Let's add a few more words here.

Title - Card 2

Long Description. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sed est error repellat veritatis.

Title - Card 3

Short Description.

`, css: `body { display: grid; grid-gap: 1rem; grid-template-columns: repeat(3, 1fr); } /* etc*/ .visual { height: 100px; width: 100%; background: wheat; margin: 0.5rem 0; } .card { display: flex; flex-direction: column; justify-content: space-between; background: lightpink; padding: 1rem; } body { font-family: system-ui, sans-serif; } h1 { font-size: 1.5rem; }` } ], [ `09: Clamping my Style`, { html: `

Title Here

Descriptive Text. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sed est error repellat veritatis.

`, css: `body { display: grid; place-content: center; height: 100vh; } .visual { height: 100px; width: 100%; background: wheat; margin: 0.5rem 0; } .card { width: clamp(23ch, 50vw, 46ch); display: flex; flex-direction: column; background: lightpink; padding: 1rem; } body { font-family: system-ui, sans-serif; } h1 { font-size: 1.5rem; }` } ], [ `10: Respect the Aspect`, { html: `

Title Here

Descriptive Text. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sed est error repellat veritatis.

`, css: `body { display: grid; place-items: center; height: 100vh; } .visual { aspect-ratio: 16/9; background: wheat; margin: 0.5rem 0; } .card { width: 80%; display: flex; flex-direction: column; background: lightpink; padding: 1rem; } body { font-family: system-ui, sans-serif; } h1 { font-size: 1.5rem; }` } ] ])32:[] 2f:{"title":"Ten modern layouts in one line of CSS","cells":[{"id":0,"value":"md`# Ten modern layouts in one line of CSS\n\nhttps://web.dev/one-line-layouts/ by [Una Kravets](https://twitter.com/una)\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":813,"value":"viewof layout = selectFlat({\n options: [...layouts.keys()],\n value: \"05: Holy Grail\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":818,"value":"md`## ${layout}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":944,"value":"fullscreen = {\n const button = html`