CSS 佈局工作台
在同一個容器裡切換 Flexbox 與 Grid，調容器與子項屬性、看每個子項的 DevTools 式盒模型讀數，即時預覽並複製容器與子項的 CSS。
CSS 佈局工作台
在同一個容器裡切換 Flexbox 與 Grid，調容器與子項屬性、看每個子項的 DevTools 式盒模型讀數，即時預覽並複製容器與子項的 CSS。
佈局工作台怎麼用
同一個容器，Flexbox 與 Grid 兩種排法
在頂端切換模式，同一批子項就換另一種模型重排。Flexbox 管主軸與交叉軸；Grid 畫出格線編號，讓你把子項從第 1 條線放到第 3 條線。兩種模式各自記住容器設定，可以來回比較同一個排版問題的兩種答案。
每個子項都能展開盒模型
點一個子項並展開盒模型，會看到 DevTools 式同心圖與實測的 content、border-box、margin-box 尺寸。改 padding、border、margin 或 box-sizing，佈局立刻跟著動；CSS 輸出裡該子項的規則也帶上同一組宣告。
常見問題
關於這個主題的常見疑問與實用解答。
原本的 Flexbox 遊樂場、Grid 遊樂場與盒模型視覺化去哪了？
它們就是這個工作台的兩種模式與每個子項的盒模型面板。舊網址仍然可用，會直接開啟對應模式；盒模型的舊網址會開啟 flex 模式並展開第一個子項的盒模型。
為什麼盒模型的尺寸是實測的，而不是自己輸入？
在真實佈局裡，子項的大小來自容器、flex-basis 或 grid 軌道，不是你打的 width。實測渲染後的盒子正是 DevTools 的做法，也才看得出 box-sizing 如何改變 padding 與 border 對這個尺寸的影響。
會把資料傳到伺服器嗎？
不會。預覽、實測讀數與 CSS 都在你的瀏覽器計算；沒有帳號、不上傳、也不保存歷史。