CSS: CSS Grid Practice
Last updated: 2026-10-13
1. 12-Column Grid System
The 12-column grid is a classic layout system in web development. Here's how to implement it with CSS Grid:
▶ Example
▶ Try it Yourself2. Common Layout Patterns
(1) Holy Grail Layout
The most common page layout pattern:
▶ Example
▶ Try it Yourself(2) Responsive Card Grid
▶ Example
▶ Try it Yourself❓ FAQ
Q Why do grid systems use 12 columns?
A 12 is divisible by 2, 3, 4, and 6 — maximum flexibility. You can create 1/2, 1/3, 1/4, 1/6, 2/3, 3/4 proportions. Bootstrap and other frameworks use 12-column grids — it's the industry standard.
Q Hand-written grid vs Bootstrap grid?
A Hand-writing helps you understand the principles; Bootstrap is a packaged implementation. Real projects use Bootstrap for efficiency, but understanding principles helps when frameworks don't meet specific needs.
Q Flex grid vs Grid grid — which is better?
A Each has strengths. Flex suits one-dimensional arrangements but can't align across rows. Grid has stronger two-dimensional capabilities. For simple row distribution, Flex is enough; for grid-line alignment, use Grid.
📖 Summary
- Grid systems are a time-tested classic layout solution
- Implementing a 12-column grid with Flexbox isn't complex — key is understanding percentage widths and flex-wrap
- 12 columns offer flexible combinations with responsive breakpoints
- While many projects use Bootstrap or Tailwind grids, implementing once yourself truly teaches the underlying principles
📝 Exercises
- Implement a complete 12-column grid system, create an HTML page showing different column combinations (3-3-3-3, 4-4-4, 2-8-2, etc.).
- Use responsive grid to show single column on mobile, two on tablet, four on desktop.
- Use
col-offset-3to center a content block on the page. - Re-implement the 12-column grid using Grid, compare code differences.
