user profile image

This Pen is a fork of rachelandrew's Pen Flexbox items vs grid items - 1d vs 2d.


  1. Hi Rachel, I've been teaching Grid to my "completely beginner" web design students and we focus on named areas at first ( because they find the line numbering syntax so confusing ) when I stumbled onto another method for this breakout technique by (kinda) hijacking named areas as an "implicit schematic".


      grid-template-areas: "  .    main    .   "
                           "full   full    full"

    So far… It's no less awkward to explain than the quirky grid-template-areas: syntax 🤓 and has an interesting benefit of not requiring an exact "mapping" to each and every cell.

    Your excellent article on understanding named-lines really helped me simplify the way I teach the concepts behind grid and I'm amazed to see how quickly these true beginners are creating complex pages with simple semantic HTML and clean, concise CSS

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.