01. CSS Grid Basics
About 2 min
01. CSS Grid Basics ๊ด๋ จ
Mastering CSS Grid | Colt Steele
Learn web development with Colt Steele
Table of Contents
Enabling CSS Grid | Colt Steele
Learn how to activate CSS Grid for a container element and the difference between 'display: grid' and 'display: inline-grid'.
Visualize CSS Grid with DevTools | Colt Steele
The grid developer tools available in modern browsers allow you to visually inspect your CSS grids with overlays and track lines.
Define CSS Grid Columns with grid-template-columns | Colt Steele
The `grid-template-columns` property is used to define column widths within a grid container in CSS Grid.
Converting a Single-Column Layout | Colt Steele
Practice defining columns by converting a single-column layout into an evenly sized three-column grid.
Define CSS Grid Rows with grid-template-rows | Colt Steele
The `grid-template-rows` property is used to define rows within a CSS Grid container.
Adjust Row Heights in an Existing Layout | Colt Steele
Practice changing the appearance of a layout without changing its markup.
Combining Rows and Columns to Create Layouts | Colt Steele
The `grid-template-columns` and `grid-template-rows` properties can both be added to create more complex layouts.
Practice Creating a Two-Column, Three-Row Layout | Colt Steele
Learn web development with Colt Steele
Paragraph Layout with CSS Grid | Colt Steele
Colorful boxes help demonstrate CSS Grid concepts, but using paragraph text provides a more realistic example.