Art Direction for the Web by Andy Clarke Five minutes with CSS Template Areas @malarkey

Art Direction for the Web by Andy Clarke

2 3 4 5

body {
display: grid; grid-column-gap : 2vw; grid-template-columns: repeat(5, 1fr); }

<body> <picture role="banner">…</picture> <h1 class="title">…</h1> <main>…</main> <aside>…</aside> <img class="fig-1"> <img class="fig-2"> </body>

[role="banner"] { grid-area: banner; } .title { grid-area: title ; } main { grid-area: main ; } aside { grid-area: aside ; } .fig-1 { grid-area: fig-1 ; } .fig-2 { grid-area: fig-2 ; }

body {
grid-template-rows: repeat(3, auto); }

body { grid-template-areas: “ . . . . . " " . . . . . " " . . . . . ";
}

body { grid-template-areas: “. aside . fig-2
fi g-2" "title title banner banner banner" "fig-1 main banner banner banner";
}

body {
grid-template-columns: 50px repeat(2, 1fr); } @media screen and (min-width : 64em) { body {
grid-template-columns: repeat(5, 1fr); } }

body { grid-template-areas: […];
} @media screen and (min-width : 64em) { body {
grid-template-areas: […]; } }

Art Direction for the Web by Andy Clarke

Available September ’18 stuffandnonsense.co.uk/books @malarkey