已作答 0 / 15 題
Flexbox
1. 用 Flexbox 做一個水平導航列：左邊 logo，右邊三個連結，垂直置中
Flexbox
2. 做三個等寬的按鈕並排，間距 12px，使用 Flexbox
Flexbox
3. 用 Flexbox 做一個卡片列表，可自動換行，每張卡最小寬度 200px
Flexbox
4. 用 flex-direction:column 做頁面框架，header 固定高度，main 自動填滿，footer 固定高度
Grid
5. 用 Grid 做三等分的商品展示區，間距 16px
Grid
6. 用 Grid 做 2:1 的兩欄版面（主內容較寬，側欄較窄）
Grid
7. 用 grid-template-areas 做聖杯佈局：header 全寬、左側欄+主內容+右側欄、footer 全寬
Grid
8. 做一個 4 欄 dashboard grid，其中一張卡片跨 2 欄
Grid
9. 用 auto-fill + minmax 做自動填充的圖片牆，最小寬度 150px
響應式
10. 做一個響應式 hero 區塊：手機垂直堆疊，768px 以上水平排列
響應式
11. 做響應式 footer：手機單欄，600px 以上變三欄
綜合
12. 結合 Grid（外層）和 Flexbox（內層卡片）做一個商品列表頁，每張卡片內有名稱、價格、購買按鈕
Grid
13. 用 CSS Grid 做一個 12 欄的網格系統，主內容佔 8 欄、側邊欄佔 4 欄
Flexbox
14. 用 Flexbox 做一個置中的登入表單卡片，垂直水平都置中，寬度最大 400px
響應式
15. 做一個響應式的 Grid 圖片牆，手機 2 欄、平板 3 欄、桌機 4 欄
確認作答完畢後，點擊交卷