.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, auto);
gap: 16px;
}CSS网格生成器是什么?
CSS 网格生成器是 CSS 网格布局的可视化构建器,您选择想要的列和行数,为每个轴选择一个轨道大小,设置间隙和对齐方式,并实时重新排列预览网格生成您所看到的精确 CSS 坐落在下面一个可复制框中,因此您永远不必手工编写网格-模板-列或在头部计算分数单位。
CSS Grid是一个二维布局模型,与flexbox沿着单个轴放置项目不同,网格同时控制行和列,容器通过一组小属性来保持结构:网格-模板-列和网格-模板-行定义轨道,间隙增加它们之间的间距,并证明-项目,对齐-项目,证明-内容和对齐-内容定位项目和轨道。该工具在一个面板中暴露这些属性并立即显示结果。
器(generator)对任何一个轨道以上的轴都使用repeat()功能,因此网格-模板-列:repeat(3,1fr)是你得到的对于一个三列的等列网格而不是重复列表的fr单元表示容器中自由空间的一小部分,这使得网格布局变得流畅:三个1fr列各取三分之一的宽度,并随着容器大小的大小回流,你还可以从轨道大小菜单中混合自动,最小内容,最大内容和固定像素轨道。
Everything 完全在你的浏览器中运行。没有注册,没有上传任何内容,并且一旦页面加载完毕,该工具就会保持离线工作。它既可以作为学习辅助工具,因为您可以观看每个属性如何更改布局,也可以作为一种快速生成可生产网格 CSS 的方式,用于图库、仪表板、卡片布局或整页外壳。生成的规则针对。grid-container 类,仅列出具有可见效果的属性,因此输出保持干净。
CSS网格生成器使用方法?
设置列和行
选择网格应有多少列和行,并观看预览构建单元格。
选择曲目大小
选择列和行的大小,例如 1fr、自动、最小内容或固定像素值。
调整间隙和对齐
设置行和列间隙,然后调整正当性并对齐以定位项目和轨道。
复制CSS
复制生成的网格规则并将其粘贴到样式表中,或继续调整预览。
主要特点
实时预览
当您更改列、行、轨道尺寸、间隙和对齐时,真正的网格会回流。
复()输出
多轨轴使用重复()来表示短的可读网格模板值,而不是重复列表。
fr 和内容轨道
为每个轴选择分数单位、自动、最小内容、最大内容或固定像素。
单独的行间隙和列间隙
独立设置间隙;该工具自动发出间隙速记或单个值。
Frequently Asked Questions
Related Tools
CSS Animation Generator
Build CSS keyframe animations from presets like fade, slide, bounce and spin. Adjust duration, easing, delay, iteration and direction, preview live, then copy the keyframes and animation shorthand.
CSS Transform Generator
Build a CSS transform from translate, rotate, scale, skew and 3D perspective with live sliders and a preview, then copy production-ready code.
CSS Transition Generator
Build a CSS transition from property, duration, timing function and delay with a live hover preview, then copy production-ready code. Supports multiple layers.
JWT Generator
Generate and sign JSON Web Tokens with HS256, HS384, or HS512, add standard claims, and copy the token. Runs client-side.
Comments
0 comments
No comments yet. Be the first to share your thoughts!