user@dailytools:/grid-guide█

CSS Grid 教學

> 預覽

> 容器設定

$ display:

$ columns:

$ rows:

$ column-gap:

$ row-gap:

$ justify-items:

$ align-items:

$ justify-content:

$ align-content:

> 項目設定

$ 選擇項目:

$ grid-column:

$ grid-row:

$ justify-self:

$ align-self:

格式範例:auto, 1 / 3, span 2, 1 / -1

> 預設範例

> 產生的 CSS

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

使用說明

互動式 CSS Grid 教學工具，即時調整屬性並預覽效果。

調整容器與項目的各種 Grid 屬性，觀察版面變化，並可複製產生的 CSS 程式碼。grid-column 和 grid-row 支援 span 語法，如「span 2」表示跨越 2 格。

$ cat /etc/author.conf

喜歡這個專案嗎？

您的支持能幫助我持續開發更多實用工具！