CSS Grid：九宫格画廊
✏️ Editable
Loading...
Live Preview
⌘+Enter Run⌘+R Reset
About This Exercise
在这个实验中，你将学习使用 CSS Grid 创建一个九宫格画廊布局。
CSS Grid 是最强大的 CSS 布局系统，特别适合创建二维布局（行和列）。
你将学到：
- 如何使用
display: grid创建网格容器 - 如何使用
grid-template-columns定义列 - 如何使用
gap控制网格间距 - 如何让网格项目居中对齐
Beginner⏱ 10-15 min
Learning Objectives
- 理解 Grid 容器和项目的关系
- 掌握 display: grid 的基本用法
- 学会使用 grid-template-columns 定义列数
- 使用 gap 控制网格间距
Scenario
你正在为一个摄影网站创建图片画廊页面。
设计要求：
- 展示 9 张图片，排列成 3x3 的网格
- 图片之间需要有适当的间距
- 每张图片大小一致，呈正方形
- 整体布局居中显示
Why Do This
- CSS is fundamentally about constraining layout and visual hierarchy, not memorizing properties.
- Clarify the box model and layout rules first, then add visual polish — less rework that way.
- Writing styles as reusable patterns is more valuable than tweaking a single page.
Hands-on Practice
- Write the layout skeleton first (display/gap/align), then add colors and shadows.
- Extract repeated styles into reusable classes.
- Use validation rules to reverse-engineer the design intent of your current styles.
Common Mistakes
- Adding margin after margin to fix positioning while ignoring layout containers.
- Selectors nested too deep, causing style coupling.
- Only caring about how it looks without considering maintainability.
Deliverable
A reusable component style template (layout rules + visual rules + naming conventions).
My Progress
Completed Steps0 / 3
Total Attempts0
Best Score0%
Completion Criteria (Checkable)
Confirm before completing this Lab
Reflection Questions (Recommended)
What was your main layout decision? Why did you choose it?
What change did you make specifically for maintainability?
What would you prioritize improving next time?
Tags
CSSGridLayoutGallery