CSS Grid 游乐场

一个交互式工具，可以实验CSS Grid属性并实时查看效果。调整网格布局设置并自动生成Pure CSS、Tailwind CSS和SCSS代码。

使用方法

设置列数和行数以定义基本网格结构

调整间隙以微调布局

添加或删除项目以查看预览

设置单个项目的位置和大小

复制生成的CSS、Tailwind或SCSS代码

主要功能

实时预览显示

支持所有CSS Grid属性

Pure CSS、Tailwind CSS和SCSS代码生成

动态添加和删除网格项目

直观的选择框控件

响应式预览

网格容器属性

列数:

行数:

选中的项目

项目 1

Grid Column

Current: auto

Grid Row

Current: auto

Align Self

Justify Self

auto

Controls horizontal positioning within the grid cell

Align Self

auto

Controls vertical positioning within the grid cell

网格容器属性

列间距 (px)

8px

0pxTight50px

行间距 (px)

8px

0pxTight50px

Align Items

Justify Items

stretch

Default horizontal alignment for all grid items

Align Items

stretch

Default vertical alignment for all grid items

预览

3×3 grid

项目 1

项目 2

项目 3

生成的代码

Pure CSS

/* Grid Container Styles */
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  column-gap: 8px;
  row-gap: 8px;
  justify-content: stretch;
  align-content: stretch;
  justify-items: stretch;
  align-items: stretch;
  grid-auto-flow: row;
}

/* Grid Item Styles */
.grid-item-1 {
  grid-column: auto;
  grid-row: auto;
  justify-self: auto;
  align-self: auto;
}

.grid-item-2 {
  grid-column: auto;
  grid-row: auto;
  justify-self: auto;
  align-self: auto;
}

.grid-item-3 {
  grid-column: auto;
  grid-row: auto;
  justify-self: auto;
  align-self: auto;
}

常见问题 (FAQ)

CSS Grid是一个强大的二维布局系统，允许您使用行和列来排列元素。它非常适合轻松创建复杂的布局。

Flexbox适用于一维布局（行或列），而CSS Grid擅长二维布局（行和列）。根据您的布局需求进行选择。

是的，生成的代码可以直接在您的网站或应用程序中使用。您可以选择Pure CSS、Tailwind CSS或SCSS格式。

您可以通过为每个网格项目设置单独的grid-column和grid-row属性来自由自定义放置。

预览是响应式的，但对于实际的响应式设计实现，您需要使用媒体查询为不同的断点应用不同的网格设置。