MazoCardsJavaScript Array Methods
Core JavaScript array methods every frontend developer should recognize quickly.
Programming flashcards
CSS Flexbox and Grid
CSS Flexbox and Grid flashcards for layout, alignment, gaps, tracks, and responsive design.
#css#flexbox#grid#frontend
About this deck
This CSS Flexbox and Grid deck reviews practical layout vocabulary: axes, tracks, gaps, alignment, item sizing, auto placement, and responsive patterns.
It is designed for frontend learners who want quick recall while building real layouts, not a long theory article.
41cards
Beginner to intermediate CSSlevel
frontend developers, web design students, and CSS interview practiceaudience
What you will learn
- Core Flexbox properties and when to use them.
- Core CSS Grid properties, tracks, areas, and placement.
- Alignment shorthand such as place-items and place-content.
- Responsive layout patterns with repeat(), minmax(), auto-fit, and auto-fill.
How to study this deck
- After each card, write a tiny CSS example from memory.
- Study Flexbox as one-dimensional layout and Grid as two-dimensional layout.
- Keep tricky pairs together, such as justify-content versus align-items and auto-fit versus auto-fill.
Scope
This deck focuses on layout recall. It does not replace building real layouts, browser testing, or accessibility checks.
Review notes
CSS layout scope last reviewed for public SEO pages on 2026-07-06.
All 41 cards in this deck
| Front | Back |
|---|---|
| display: flex | Creates a flex formatting context for direct children |
| flex-direction: row | Main axis runs horizontally in the inline direction |
| flex-direction: column | Main axis runs vertically in the block direction |
| flex-wrap: wrap | Allows flex items to move onto multiple lines |
| justify-content | Aligns flex items along the main axis |
| align-items | Aligns flex items along the cross axis |
| align-content | Distributes multiple flex lines along the cross axis |
| gap | Sets space between flex or grid items without margins |
| flex-grow | Controls how much an item grows into free space |
| flex-shrink | Controls how much an item shrinks when space is tight |
| flex-basis | Sets the initial main-axis size of a flex item |
| flex: 1 | Shorthand for a flexible item that can grow and shrink |
| order | Changes visual order of flex or grid items |
| align-self | Overrides cross-axis alignment for one item |
| min-width: 0 in flex | Lets overflowing text shrink inside flex items |
| display: grid | Creates a grid formatting context for direct children |
| grid-template-columns | Defines explicit column tracks |
| grid-template-rows | Defines explicit row tracks |
| fr unit | Shares available grid space as a fraction |
| repeat() | Repeats a grid track pattern |
| minmax() | Sets a grid track minimum and maximum |
| auto-fit | Collapses empty repeated tracks when space remains |
| auto-fill | Keeps empty repeated tracks available |
| grid-column | Places or spans an item across columns |
| grid-row | Places or spans an item across rows |
| grid-area | Names or positions an item in a grid |
| grid-template-areas | Defines named layout regions with strings |
| place-items | Shorthand for align-items and justify-items |
| place-content | Shorthand for align-content and justify-content |
| justify-items | Aligns grid items inside their grid areas horizontally |
| implicit grid | Tracks created automatically for unplaced items |
| grid-auto-flow | Controls how auto-placed grid items flow |
| grid-auto-columns | Sets size of implicit columns |
| grid-auto-rows | Sets size of implicit rows |
| subgrid | Lets a nested grid inherit parent tracks where supported |
| responsive grid pattern | repeat(auto-fit, minmax(16rem, 1fr)) |
| content-first layout | Use intrinsic sizes before forcing fixed widths |
| centering with grid | display: grid; place-items: center; |
| centering with flex | display: flex; justify-content: center; align-items: center; |
| when to use Flexbox | Use for one-dimensional row or column layout |
| when to use Grid | Use for two-dimensional rows and columns |
Frequently asked questions
Should I learn Flexbox or Grid first?
Learn both. Flexbox is best for one-dimensional row or column layout, while Grid is best for two-dimensional page or component layout.
Does this deck include responsive CSS patterns?
Yes. It includes common patterns such as repeat(auto-fit, minmax(...)) and layout alignment shorthands.
Is this useful for frontend interviews?
Yes for quick recall, especially when paired with real examples and layout practice.
Is the CSS Flexbox and Grid flashcard deck free?
Yes. You can study it free in your browser on MazoCards. Create a free account to save progress, track streaks, and sync across devices.
More Programming flashcards
Git Commands Cheat Sheet
Common Git commands for everyday development, commits, branches, and debugging history.
Python Basics: Syntax & Data Types
A friendly Python starter deck covering variables, collections, functions, and control flow.
React Hooks Essentials
Core React hooks and when to use them in modern component code.
SQL Basics: Queries & Joins
Essential SQL concepts for reading data, filtering rows, and joining tables.
Common TCP and UDP Ports
Common network port flashcards for CompTIA-style networking, sysadmin, and developer review.
Start studying CSS Flexbox and Grid
Study these 41 cards free, then create an account to save your progress and build a streak.