Grid Templates & Fr Units
What is CSS Grid?
Imagine drawing a tic-tac-toe grid on a sheet of paper. You have a two-dimensional grid of horizontal rows and vertical columns. You can place items into specific square slots, stretch them across multiple boxes, or size the rows and columns to automatically share the page space.In CSS, CSS Grid is a powerful two-dimensional layout system. Unlike Flexbox (which is one-dimensional and handles either rows *or* columns), Grid handles both rows and columns simultaneously, allowing you to build complex web layouts.
display: grid: Converts the element into a grid container.grid-template-columns: Defines the number and widths of columns.fr (Fractional Unit): Represents a fraction of the available free space in the grid container. (e.g., 1fr 2fr creates two columns, where the second is twice as wide as the first).Why does it matter?
CSS Grid is the ultimate tool for page-level layouts. It allows you to build complete website dashboard wireframes (with headers, sidebars, main content areas, and footers) in just a few lines of code without needing complex margins or floating hacks.Syntax Breakdown
display: grid; — Initializes grid layout.grid-template-columns: 1fr 2fr; — Creates two columns: one occupying 1/3 and the other 2/3 of the space.1fr Share
2fr Share
Common Mistakes
width: 33.33%), adding gap: 10px; will push the total size over 100%, causing grid items to overflow. The fr unit handles spacing calculations automatically, factoring in gap sizes!Quick Reference
display: grid — Initializes grid layout structure.grid-template-columns — Defines column configurations.fr — Fractional unit of available layout space.Your Task
Turn `.grid-layout` into a grid container using `display: grid;` and define two columns: the first taking `1fr` and the second taking `2fr`.
index.html
Type code above to start the lesson.
Live Preview