企业官网建设流程全解析

styled-css-grid API速查：Grid与Cell全部属性完整参考清单

【免费下载链接】styled-css-grid🍱 A tiny CSS grid layout for React项目地址: https://gitcode.com/gh_mirrors/st/styled-css-grid

styled-css-grid 是一个仅约 2kb 的 React CSS Grid 布局库，基于 styled-components 构建，只暴露Grid和Cell两个组件。本文整理这两个组件的全部属性、默认值与对应 CSS 属性，帮你一份清单速查到位，快速上手响应式网格布局。

快速上手：3 行代码搭好网格

先安装（需已安装 React 与 styled-components）：

yarn add styled-css-grid

最简用法：

import { Grid, Cell } from "styled-css-grid"; <Grid columns={2} gap="2px"> <Cell>foo</Cell> <Cell height={2}>bar</Cell> <Cell width={2}>baz</Cell> </Grid>

📌 核心规则记住一句话：Grid 管"轨道"（列数、行高、间距），Cell 管"占位"（跨几格、放在哪）。

Grid 组件属性速查表（11 个属性）

Grid负责容器的网格定义，源码见 lib/Grid.js。

💡重点技巧：columns传数字是repeat(N, 1fr)的简写；传字符串则能解锁 CSS 全部能力，例如响应式自动换列：

<Grid columns="repeat(auto-fit, minmax(120px, 1fr))" minRowHeight="45px"> <Cell>A</Cell> <Cell>B</Cell> </Grid>

Cell 组件属性速查表（7 个属性）

Cell是网格中的"格子"，源码见 lib/Cell.js。

💡精确定位技巧：left+top组合可以让 Cell 跳到任意位置，例如left={3} top={2}表示从第 3 列、第 2 行开始放置，做圣杯布局、九宫格都很顺手（参考 website/components/sections/Positioning.js）。

高频场景属性组合：圣杯布局示例

经典 Holy Grail 布局（页头 + 三栏 + 页脚）只需两个 Grid 属性 + 一个 Cell 属性：

<Grid columns="100px 1fr 100px" rows="minmax(45px, auto) 1fr minmax(45px, auto)"> <Cell width={3}><h1>Header</h1></Cell> <Cell>Menu</Cell> <Cell>Content</Cell> <Cell>Ads</Cell> <Cell width={3}>Footer</Cell> </Grid>

要点：columns定义三列宽度、rows让中间行1fr撑满剩余高度、页头页脚用width={3}横跨全部三列（参考 website/components/sections/HolyGrail.js）。

浏览器支持情况速查

styled-css-grid 底层依赖原生 CSS Grid，因此兼容性取决于浏览器对 CSS Grid 的支持，主流现代浏览器均已支持：

⚠️ 注意：如需支持 IE，请自行做降级方案；仅面向现代浏览器则可直接放心生产使用。

速查总结：3 个高频问题

• 想让某格占 2 列？→ Cell 上加width={2}
• 想让某格占 2 行？→ Cell 上加height={2}
• 想让内容垂直/水平居中？→ 分别加middle/center

完整类型定义（含全部属性的 TypeScript 签名）可参考 index.d.ts，官方文档与用法说明见 README.md。属性就这么多——收藏本文，写布局时对照即可。

【免费下载链接】styled-css-grid🍱 A tiny CSS grid layout for React项目地址: https://gitcode.com/gh_mirrors/st/styled-css-grid