styled-css-grid API速查Grid与Cell全部属性完整参考清单【免费下载链接】styled-css-grid A tiny CSS grid layout for React项目地址: https://gitcode.com/gh_mirrors/st/styled-css-gridstyled-css-grid 是一个仅约 2kb 的 React CSS Grid 布局库基于 styled-components 构建只暴露Grid和Cell两个组件。本文整理这两个组件的全部属性、默认值与对应 CSS 属性帮你一份清单速查到位快速上手响应式网格布局。快速上手3 行代码搭好网格先安装需已安装 React 与 styled-componentsyarn add styled-css-grid最简用法import { Grid, Cell } from styled-css-grid; Grid columns{2} gap2px Cellfoo/Cell Cell height{2}bar/Cell Cell width{2}baz/Cell /Grid 核心规则记住一句话Grid 管轨道列数、行高、间距Cell 管占位跨几格、放在哪。Grid 组件属性速查表11 个属性Grid负责容器的网格定义源码见 lib/Grid.js。属性类型默认值对应 CSS 属性说明columnsnumber / string12grid-template-columns传数字 等分 N 列传字符串则原样透传 CSS 值rowsnumber / string无grid-template-rows传数字 等分 N 行常用1fr等gapstring8pxgrid-gap统一行列间距columnGapstring无column-gap单独设置列间距rowGapstring无row-gap单独设置行间距minRowHeightstring20pxgrid-auto-rows行最小高度生成minmax(20px, auto)heightstringautoheight容器整体高度flowstringrowgrid-auto-flow自动排列方向可设column、dense等areasstring[]无grid-template-areas区域布局如[a a, b c]justifyContentstring无justify-content水平整体对齐center、space-between…alignContentstring无align-content垂直整体对齐重点技巧columns传数字是repeat(N, 1fr)的简写传字符串则能解锁 CSS 全部能力例如响应式自动换列Grid columnsrepeat(auto-fit, minmax(120px, 1fr)) minRowHeight45px CellA/Cell CellB/Cell /GridCell 组件属性速查表7 个属性Cell是网格中的格子源码见 lib/Cell.js。属性类型默认值对应 CSS 属性说明widthnumber1grid-column-end水平占几格本质是span Nheightnumber1grid-row-end垂直占几格本质是span Nleftnumber / string无grid-column-start从第几列开始topnumber / string无grid-row-start从第几行开始areastring无grid-area配合 Grid 的areas使用middlebooleanfalse内部 flex内容垂直居中centerbooleanfalsetext-align: center文本水平居中精确定位技巧lefttop组合可以让 Cell 跳到任意位置例如left{3} top{2}表示从第 3 列、第 2 行开始放置做圣杯布局、九宫格都很顺手参考 website/components/sections/Positioning.js。高频场景属性组合圣杯布局示例经典 Holy Grail 布局页头 三栏 页脚只需两个 Grid 属性 一个 Cell 属性Grid columns100px 1fr 100px rowsminmax(45px, auto) 1fr minmax(45px, auto) Cell width{3}h1Header/h1/Cell CellMenu/Cell CellContent/Cell CellAds/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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考