Building a Better Web
June 11–12, 2018: Training
June 12–14, 2018: Tutorials & Conference
San Jose, CA

Creating modern page layouts with CSS Grid

Jen Kramer (Harvard University Extension School)
1:30pm–5:00pm Tuesday, June 12, 2018
Secondary topics:  Hands-on
Average rating: ****.
(4.83, 6 ratings)

Who is this presentation for?

  • Frontend web developers, HTML and CSS specialists, UI/UX specialists, and those with a JavaScript background who care about CSS

Prerequisite knowledge

  • Familiarity with HTML and CSS

Materials or downloads needed in advance

  • A laptop with the latest versions of Firefox and Chrome and a text editor suitable for modifying HTML and CSS installed

What you'll learn

  • Explore the CSS Grid specification
  • Understand page layouts using Grid
  • Learn how to combine Grid with media queries to create responsive designs


CSS Grid is the brand-new spec available in the latest browsers. Jen Kramer details Grid’s basic syntax, using a layout of a Mondrian painting as an example, and explores alternative Grid syntaxes as well as nested and offset grid layouts. Jen concludes by walking you through combining Flexbox and Grid to solve a web page layout problem.

Photo of Jen Kramer

Jen Kramer

Harvard University Extension School

Jen Kramer is a Lecturer at Harvard University Extension School in the Master’s of Liberal Arts in Digital Media Design program, where she teaches five courses per year, advises students, and assists in curriculum design. Jen is also a prolific video author and has created more than 30 training courses for, O’Reilly Media, osTraining, and Frontend Masters. She is also available for individual private tutoring, customized classroom training, and occasional freelance web design work. Jen holds a BS in biology from the University of North Carolina at Chapel Hill and an MS in internet strategy management at the Marlboro College Graduate School.