A presentation at SydCSS in in Sydney NSW, Australia by Andy Clarke
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);
}
[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: […];
}
}
Available September ’18 stuffandnonsense.co.uk/books @malarkey
Art Direction for the Web by Andy Clarke
for free. You
can too.