02. Units and Utilities 관련

Mastering CSS Grid | Colt Steele

---

Learn web development with Colt Steele

• Table of Contents

---

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