LocalTools离线浏览器工具合集

分类: 开发工具

CSS 网格生成器

站方自主规划没找到想要的工具？

构建 grid-template 布局并复制 CSS

在实时网格预览上设置列数、行数和间距，还可以选择把列切换为 minmax() 轨道，让它们在换行前先收缩，然后复制生成的容器声明。这里的一切都不会离开你的浏览器。

输出
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 12px;
}

本页的所有处理都在浏览器中完成，不会上传任何内容。

这个工具能做什么

grid-template-columns: repeat(n, 1fr) 会生成等宽的列，但这些列在内容撑开后不会再收缩，在窄屏上就会溢出。改用 minmax(min, 1fr) 后，每一列可以先收缩到一个下限，网格才会放弃并换行——这就是在手机上依然阅读顺畅的布局和不能阅读的布局之间的差别。这个工具用同一组控件生成两种写法，让差别能在真实网格上直接看到，而不只是停留在声明代码里。

使用方法

  1. 设置列数和行数。
  2. 设置单元格之间的间距。
  3. 如果希望列在窄屏上能够收缩，就开启 minmax() 列，然后复制 CSS。

隐私说明

本工具完全在你的浏览器中运行。输入的内容不会被上传、保存或分享，关闭标签页即随之消失。

常见问题

预览是真实的 CSS 网格吗？
是的。带编号的单元格正是用你所设置的 grid-template-columns 和 grid-template-rows 排列的。
minmax() 到底改变了什么？
不使用它时，repeat(n, 1fr) 的列会保持等宽，但永远不会收缩到内容以下，所以窄容器只会直接溢出。minmax(min, 1fr) 则允许每一列先收缩到最小值，浏览器才会寻找别的方式来容纳它们。
有内容会被上传吗？
不会。声明代码是根据你设置的控件在页面内组装的文本，预览网格也是在本地渲染的。

返回全部工具