Build a layout拼出你的版面

Pick a layout, move the blocks and switch to a phone-sized preview選個版型、拖動區塊，再切到手機看看畫面怎麼排

Guides

Drag the blocks and try another arrangement83%

Arrow keys move · Shift + arrows resize · Esc cancels drag · use position fields in narrow preview

Drag a block, or select one and use the arrow keys5 blocks · 6 × 4

Advanced settings & export

.layout-container {
  container: layout / inline-size;
}

.layout-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: repeat(4, minmax(80px, 1fr));
  gap: 16px;
  align-items: stretch;
  justify-items: stretch;
}

.layout-block {
  min-width: 0;
  min-height: 48px;
  padding: 16px;
  box-sizing: border-box;
  overflow-wrap: anywhere;
  border: 1px solid #b8b6af;
  background: #efeee8;
  color: #242526;
  font: 16px/1.5 system-ui, sans-serif;
}

.layout-item-1 {
  grid-column: 1 / span 6;
  grid-row: 1 / span 1;
}

.layout-item-2 {
  grid-column: 1 / span 2;
  grid-row: 2 / span 3;
}

.layout-item-3 {
  grid-column: 3 / span 4;
  grid-row: 2 / span 2;
}

.layout-item-4 {
  grid-column: 3 / span 2;
  grid-row: 4 / span 1;
}

.layout-item-5 {
  grid-column: 5 / span 2;
  grid-row: 4 / span 1;
}

@container layout (max-width: 520px) {
  .layout-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-auto-rows: minmax(80px, auto);
    align-items: stretch;
    justify-items: stretch;
  }
  .layout-block {
    grid-column: auto;
    grid-row: auto;
  }
}

Export includes a 520px container query for single-column layouts based on component width — no JavaScript or packages required

Enable JavaScript to play. You can still read how it works below.啟用 JavaScript 即可操作實驗，下方的製作說明仍可直接閱讀

How it works看看怎麼做的

Grid studioGrid 版面編排器

CSS Grid
Container queries
HTML + CSS

Grid lines as the model格線就是資料模型

Each block stores its starting column, row and spans. Dragging maps to measured grid spacing, keyboard controls move blocks, and changing the grid constrains bounds while reporting overlaps.每個區塊保存起始欄列與跨度，拖曳依實際格線間距換算位置，鍵盤也能移動，縮小欄列時限制區塊邊界並指出重疊

Preview real container widths在真實寬度預覽

390, 768 and 1200 px previews scale to fit the workspace. Containers up to 520 px stack into one column, matching the container query in the exported CSS.390、768 與 1200 px 預覽依可用空間縮放，容器寬度不超過 520 px 時改成單欄，匯出的 container query 採相同規則

A layout that stands alone可獨立使用的版面

Copy CSS, HTML or a standalone page with grid-column, grid-row and responsive rules. The generated layout requires neither this tool nor React.可複製 CSS、HTML 或完整獨立頁面，包含區塊的 grid-column、grid-row 與響應式規則，不需要安裝這個工具或 React