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
Web Foundations: CSS, HTML, JS, Node
Location: 210 C/G Level: Beginner
Secondary topics:  Hands-on

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. For more than 18 years, Jen has been educating clients, colleagues, friends, and graduate students about the meaning of a quality website and has built websites that are supportive of business and marketing goals, both in a freelance capacity and as part of an agency. Jen is also a prolific video author and has created 27 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.

Leave a Comment or Question

Help us make this conference the best it can be for you. Have questions you'd like this speaker to address? Suggestions for issues that deserve extra attention? Feedback that you'd like to share with the speaker and other attendees?

Join the conversation here (requires login)