Slides from the WordCamp Europe presentation by the same name. From the conference website:
CSS Grid is now live in all major browsers, and with it everything we know about web layouts changes! Imagine drawing a grid in the browser and placing content in one or any number of cells without having to change the HTML or source order. And imagine changing that grid on the fly using media queries or JavaScript while keeping the HTML markup clean and accessible. That’s what CSS Grid does, and that’s why you should be using it today.
The CSS Grid Layout Module introduces a native CSS grid system, provided at the viewport level, that achieves what CSS frameworks and popular grid systems could only dream about: Responsive, flexible, pure CSS grid layouts, independent of document source order, that allow us to treat the browser as a true design and layout surface.
In this talk you’ll get an intro to CSS Grid and learn how it changes pretty much everything when it comes to layouts on the web. Through examples, code snippets, and practical demos you’ll learn how to use CSS Grid in a theme for modern responsive layouts, and you’ll also learn how to handle older browsers without Grid support in a clean and straight-forward way.
CSS Grid is here, and you can start using it today. This talk shows you how to do it right.
21. This is a hack.
float and flex force us
to create HTML clutter in
the form of wrappers
like the .container
element in this example.
.main-content .sidebar
.wrap
.container
.other-content
22. This is web
layouts today.
float and flex have
been the two only
options for creating
horizontal layouts
resulting in the web
suffering from a severe
case of Divitis.
.main-content .sidebar
.wrap
.container
.other-content
36. Problem:
Current tools for web
layout are
content-out and
one-dimensional.
Solution:
Two-dimensional
layout-in tool to
separate content
from presentation.
43. Element that is a direct
descendant of the grid
container.
Grid item <div class="site">
<header class="masthead">
</header>
<h1 class="page-title">
</h1>
<main class="main-content">
</main>
<aside class="sidebar">
</aside>
<footer class="footer">
</footer>
</div><!-- .site -->
55. Draws grid lines. Takes list of length
values (em, px, %, fr, etc.) denoting the
distance between each line.
grid-template-columns
grid-template-rows
63. Naysayer to your left
Looks promising, but
remembering what lines to
target seems tricky… especially
when the site is responsive.
64.
65. Applied to grid container. Uses a text-
based grid map to apply grid area names
to individual cells.
grid-template-areas
66. .site.site {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
grid-template-rows: auto 1fr 3fr;
grid-template-areas:
"title title title"
"main header header"
"main sidebar footer";
}
title title title
main
main
header header
sidebar footer
67. Specifies what grid area the element is
placed within.
grid-area: [area name];
68. title title title
main
main
header header
sidebar footer
.page-title
.main-content
.sidebar .footer
.masthead
.site.site {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
grid-template-rows: auto 1fr 3fr;
grid-template-areas:
"title title title"
"main header header"
"main sidebar footer";
}
.masthead {
grid-area: header;
}
.page-title {
grid-area: title;
}
.main-content {
grid-area: main;
}
/* etc etc */
79. Internet Explorer 101 and Edge2 lag behind*
1 IE10 uses the original Grid specification.
2 Edge is adopting the modern specification as we speak.
* Fun fact: CSS Grid was invented by Microsoft for IE10.
80. Use feature queries to test for grid support
in the current browser.
@supports (display: grid) { … }
Current recommendation:
81. Test for grid-area instead,
because Edge lies about grid support.
@supports (grid-area: auto) { … }
My recommendation:
82. Everyone right now
But wait! That means
the site won’t look the
same in all browsers!!!!!
88. 1. Build accessible mobile-first
layout without grid.
2. Use mobile-first layout as
fallback for all browsers.
3. Use @supports to detect grid
support.
4. At the appropriate
breakpoint, create layout
with grid and grid-areas.
5. Explore new layouts as
viewport widens.
CSS Grid:
A Practical
Approach
for Today