Short intro into the use of CSS Grid layout in web design. Workshop with Women's Tech Hub Bristol, August 2017.

1. CSS GRID
LAYOUT
Brave New Web Design

2. A BRIEF HISTORY IN WEBPAGE LAYOUT
First Webpage 1992

3. A BRIEF HISTORY IN WEBPAGE LAYOUT
Yahoo! Website 2002Yahoo! Website 1996

4. A BRIEF HISTORY IN WEBPAGE LAYOUT
Yahoo! Website 2017Yahoo! Website 2009

5. CSS GRID LAYOUT DEFINITION
A grid is an intersecting set of horizontal and vertical lines. One
set defining rows and one set defining columns. Elements can be
placed onto the grid, respecting these column and row lines.

6. CSS GRID LAYOUT LEVEL 1 SPECIFICATION
★ Two-dimensional grid-based layout system.
★ Fixed track sizes (px) and/or flexible track sizes (%, fr).
★ Precise item placement through line numbers, names or areas.
Algorithm for non-defined items included.
★ Automated creation of additional tracks to hold content e.g.
add as many rows as will fit in container.
★ Alignment control of grid and grid elements.
★ Overlapping content control through z-index.

7. CSS GRID LAYOUT SUPPORT
Source: caniuse.com 2.08.2017

8. CSS GRID LAYOUT TERMINOLOGY
★ Grid Container > Element to which display:grid; is applied.
★ Grid Item > Direct descendants of the grid container.
★ Grid Line > Dividing lines of the grid structure. Horizontal (row)
and vertical (column) lines.
★ Grid Track > The space between two adjacent grid lines.
★ Grid Cell > Single unit. Space between 2 adjacent column and
row grid lines.
★ Grid Area > Total space surrounded by 4 grid lines. Can consists
of a numerous grid cells.

9. CSS GRID LAYOUT TERMINOLOGY

10. CSS GRID CONTAINER PROPERTIES
★ display: grid | inline-grid | subgrid
★ grid-template-columns: <track-size> ... | <line-name> <track-
size> …
★ grid-template-rows <track-size> ... | <line-name> <track-
size> …
★ grid-column-gap | grid-row-gap <line-size>
★ grid: none | <grid-template-rows> / <grid-template-columns> |
<grid-auto-flow> [<grid-auto-rows> [/ <grid-auto-columns>]]
★ justify-items | align-items: start | end | center | stretch
★ justify-content | align-content: start | end | center | stretch

11. CSS GRID FUNCTIONS
★ MinMax()
grid-auto-rows
with a minimum height (px) but expanding with content (auto).
★ Auto-placement and order
grid-auto-flow: column | row | dense
By default items are laid out by row.
★ Flexible filling of tracks
auto-fit | auto-fill
Use in combination with minmax() to achieve flexible filling of
tracks on grid in viewport.
★ and many more …

12. CSS GRID ELEMENT PROPERTIES
★ grid-column-start, grid-column-end,
grid-row-start, grid-row-end: <number> | <name> |
span <number> | span <name> | auto
★ grid-column | grid-row: <start-line> / <end-line>
★ grid-area: <name> | <row-start> / <column-start> / <row-
end> / <column-end>
★ justify-self: start | end | center | stretch
★ align-self: start | end | center | stretch

13. CSS GRID LAYOUT RESOURCES
★ Great work by Rachel Andrew: https://gridbyexample.com/
★ Rachel Andrew’s Website & Blog: https://rachelandrew.co.uk/
★ Rachel Andrew’s Weekly Newsletter: http://csslayout.news/
★ Jen Simmons Work on CSS: http://jensimmons.com/
★ Jen Simmons Lab with Examples: http://labs.jensimmons.com/
★ Mozilla Developer Network Documentation:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
★ Playtime: http://cssgridgarden.com/ and http://flexboxfroggy.com/
★ Beauty: http://www.csszengarden.com/
★ All things CSS: https://css-tricks.com/

14. “Becoming someone who understands
CSS, rather than someone who just
uses CSS, will give you a huge
advantage in your work.
Rachel Andrew

15. THANK YOU!
ajara i. pfannenschmidt
web craftswoman
@ip_nagare
ip@nagare.eu