postcss-grid-kiss

grid-kiss: 让 CSS 网格变得简单而愚蠢 这是一个 [PostCSS][postcss-website] 插件，旨在用一个单一的属性来取代 [CSS 网格][w3c-spec] 中的 24 个新属性，你一看到它就立即能理解。目录 示例 安装 使用 回退选项 替代样式 文档 - 如何绘制网格 - 选择器所接受的值 - 行的尺寸 - 列的尺寸 - 间隙的尺寸 - 尺寸所接受的值 - 网格的水平对齐 - 网格的垂直对齐 - 区域内的水平对齐 - 区域内的垂直对齐 示例 [在线尝试][playground] 尝试不同的示例，并在 [playground][playground] 上使用该插件。编辑左侧的 CSS 和 HTML，网格将立即更新。基本网站布局 css body { grid-kiss: "+-------------------------------+" | header ↑ | 120px "+-------------------------------+" | .sidebar | | main | auto "+----------+" | ↓ | 60px | → footer ← "+-------------------------------+" } 会转换为: css body header { grid-area: header; align-self: start; } body .sidebar { grid-area: sidebar; } body main { grid-area: main; } body footer { grid-area: footer; justify-self: center; align-self: end; } body { display: grid; align-content: space-between; grid-template-rows: 120px 1fr 60px; grid-template-columns: 30% 1fr; grid-template-areas: "header header" "sidebar main" "footer footer"; } 显示这种网格布局: 响应式布局 使用不同的 grid-kiss 声明在媒体查询中，可以轻松获得响应式布局。建议从小屏幕上的网格开始，然后使用媒体查询逐步增强在更宽屏幕上的布局。安装 - 使用 npm bash npm install postcss-grid-kiss --save-dev - 使用 yarn bash yarn add postcss-grid-kiss --dev 使用 如果您以前从未使用 PostCSS，请先阅读 PostCSS 使用文档。 - 使用命令行界面：bash postcss src/your.css --output dist/compiled.css --use postcss-grid-kiss - 使用 Node: js const postcss =…