Flexbox & CSS Grid Mastery Cheatsheet

Quick reference for all layout concepts covered in Lecture 4.

Flexbox Container Properties

Apply these to the parent element (display: flex).

Key Rule: justify-content = main axis (horizontal in row). align-items = cross axis (vertical in row).

Flexbox Item Properties

Apply these to the child elements inside a flex container.

The 90% Shorthand:

1.item { flex: 1; }
2/* Expands to: flex-grow: 1; flex-shrink: 1; flex-basis: 0%; */
Copy

CSS Grid Container Properties

Apply these to the parent element (display: grid).

Shorthand with `repeat()`:

1grid-template-columns: repeat(3, 1fr);
2/* Same as: 1fr 1fr 1fr */
Copy

CSS Grid Item Properties

Apply these to child elements inside a grid container.

The fr Unit

The fr unit represents a fraction of the remaining space in the grid container.

1grid-template-columns: 1fr 2fr 1fr;
2/* On an 800px container (no gap):
3   Total fr = 1 + 2 + 1 = 4
4   1fr = 800 / 4 = 200px
5   Columns: 200px | 400px | 200px */
Copy

Mix with fixed values:

1grid-template-columns: 250px 1fr;
2/* 250px sidebar, remaining space for main content */
Copy

The Magic Responsive Pattern

One line. No media queries. Responsive card grid:

1.grid {
2    display: grid;
3    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
4    gap: 16px;
5}
Copy

How it works:

• auto-fit: Create as many columns as will fit
• minmax(250px, 1fr): Each column is at least 250px, grows to fill remaining space
• Result: 4 columns on wide screens → 3 → 2 → 1 on narrow screens — automatically!

Flexbox vs Grid Decision Guide

Rule of thumb: Grid for the big picture (macro layout), Flexbox for the details (micro layout).

Common Mistakes to Avoid

1. Flex Properties on Wrong Element

1/* WRONG — justify-content goes on the CONTAINER */
2.item { justify-content: center; }
3
4/* CORRECT — put it on the parent */
5.container {
6    display: flex;
7    justify-content: center;
8}
Copy

2. Invalid align-items Value

1/* WRONG — space-between is for justify-content only */
2.container {
3    display: flex;
4    align-items: space-between;
5}
6
7/* CORRECT — use a valid value */
8.container {
9    display: flex;
10    align-items: center; /* or flex-start, flex-end, stretch, baseline */
11}
Copy

3. Using fr Outside of Grid

1/* WRONG — fr only works with grid-template-columns/rows */
2.item { width: 1fr; }
3
4/* CORRECT — use fr in grid templates */
5.container {
6    display: grid;
7    grid-template-columns: 1fr 2fr;
8}
Copy

4. Forgetting display: grid/flex

1/* WRONG — template properties do nothing without display: grid */
2.container {
3    grid-template-columns: 1fr 1fr 1fr;
4}
5
6/* CORRECT */
7.container {
8    display: grid;
9    grid-template-columns: 1fr 1fr 1fr;
10}
Copy

VS Code Shortcuts

Chrome DevTools Layout Tools

Flexbox Inspector

• Select a flex container in Elements panel
• Look for the flex badge next to the element
• Click the badge to toggle the Flexbox overlay
• Shows main axis direction, item boundaries, and gap visualization

Grid Inspector

• Select a grid container in Elements panel
• Look for the grid badge next to the element
• Click the badge to toggle the Grid overlay
• Shows grid lines, track sizes, line numbers, and area names

Layout Panel

• Open DevTools → Layout tab
• Lists all Flex and Grid containers on the page
• Toggle overlays for multiple containers simultaneously
• Customize overlay colors and display options

What's Next?

In Lecture 5: Advanced CSS & Responsive Design, you'll learn:

• Media queries for different screen sizes
• Mobile-first vs desktop-first strategy
• Responsive units (rem, em, vw, vh)
• Making your dashboard truly responsive on every device

Keep this cheatsheet handy while working on your assignment!