Search⌘ K

Grid Gap Rhythm Layout

Explore how to establish a consistent vertical rhythm in a two-column CSS Grid layout using CSS custom properties and grid gap. Understand how to set line-height and margins on headings and paragraphs to align text elements perfectly with grid rows, ensuring clean and scalable typography.

Problem description

You have a container element with class .grid that lays out child <h2> headings and <p> paragraphs in a two-column CSS Grid layout. Your task is to implement a consistent vertical rhythm by:

  1. Defining a CSS custom property --rhythm as 1.5rem. ...