Designing Layouts: The New Superpowers of CSS

<span>Made</span>

<span>by</span> 

<span>Few</span>

</h1> </main> Example: Writing Mode 3 A

@supports (initial-letter: 4 ) or (-webkit-initial-letter: 4 ) { p::first-letter {

color: rgba(255,190,150,0.9); 
font-weight: bold; 
margin-right: 0.5em;

-webkit-initial-letter: 4; initial-letter: 4; }

}

<li>…</li>

<li>…</li>

<li>…</li> 

<li>…</li>

<li>…</li>

</ul> ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); grid-gap: 0.5rem 1rem; } li { // are Grid items display: flex; flex-flow: column; } img { order: -1; }

ul {

display: grid; grid-template-columns:

         repeat(4, 1fr);

}

ul {

display: grid; grid-template-columns:

    4fr 2fr 2fr 3fr 6fr

; }

1 2 3 4 1 2 3 4 5 cow horse dog pig .container { grid-template-rows:[cow] 1fr

[horse]

1fr [dog] 1fr [pig]; }
.item { grid-row: 3; grid-column: horse / pig; }

header { grid-area: header; } main { grid-area: main;
} aside { grid-area: aside;
} footer { grid-area: footer; }

body {

display: grid;

grid-template-columns: 3fr 1fr;

grid-gap: 2rem;

grid-template-areas:

  "header

header" "content sidebar " "footer footer" ;
} ‘header’ ‘aside’ 1fr ‘main’ 3fr ‘footer’

body {

display: grid;

grid-gap: 2rem; grid-template-areas:

"header" "content"

"sidebar

" "footer" ;
} @media (min-width: 800px) { body {

grid-template-columns: 

   3fr 1fr;

grid-template-areas:

"header header" "content sidebar " "footer footer" ;
}

}