02. Units and Utilities
About 2 min
02. Units and Utilities ๊ด๋ จ
Mastering CSS Grid | Colt Steele
Learn web development with Colt Steele
Table of Contents
Using Percentage Units | Colt Steele
Learn web development with Colt Steele
Simplify Grid Layouts with Fraction Units | Colt Steele
Percentages are easier than pixels, but even they can reach a limit. Fractional units provide a flexible approach to layouts.
Implement a Layout with Fractional Units | Colt Steele
Create a three-column layout with equal-sized columns and two rows. The top row should be twice as large as the bottom row. The layout should be responsive.
Mixing Fractions and Pixels | Colt Steele
You aren't stuck with just one unit when defining a grid. Mixing units allows for more complex layouts.
Simplify Layout Definitions with repeat | Colt Steele
CSS Grid's `repeat` function is a time saving way to define your layouts.
Implement a Checkerboard Layout | Colt Steele
Practice using fractional units and the `repeat` function by implementing a checkerboard layout.
Save Time with the grid-template Shorthand | Colt Steele
So far we've been defining rows and columns manually. The `grid-template` shorthand allows us to define both at once.
Adding Gaps between Rows and Columns | Colt Steele
CSS Grid supports adding gaps between rows and columns, allowing you to put visual space between elements.
Practice Using Shorthand Properties and Gaps | Colt Steele
Learn web development with Colt Steele
