多年来,当一种设计需要真正的二维布局时,我的本能是达到一堆嵌套的柔性容器。一列内的一排卡片在另一排内,每一张都弯曲,每一张都为空间而与其他人战斗。它起作用了,从某种意义上说,像素最终落在我想要的地方,但它从来都不是正确的工具,每次我必须改变设计时,我都为快捷方式付费。 CSS Grid 正是为此而构建的,当我不再回避它的那一天,我的布局代码变得更短,标记也变得更平坦。
让我长时间远离网格的是语法。 grid-template-columns: repeat(3, minmax(0, 1fr)) 不是一个从手指上滚下来的短语,你声明的曲目和出现的盒子之间的关系并不明显,直到你看到它发生了几十次。 "我知道我想要什么"和"我知道产生它的属性"正是生成器关闭的内容。
的 CSS 网格生成器 让您设置列和行的数量,为每个轴选择一个大小,在间隙中拨打,并调整对齐方式,同时实时预览会重新流过您面前。产生您所看到内容的确切 CSS 坐落在下面的可复制框中。它将网格从您必须记住的规范变成您通过单击构建的布局。
TL;博士: CSS Grid是一个二维布局模型,同时控制行和列,容器驱动它通过
grid-template-columns、grid-template-rows、gap并且这四个证明和对齐属性。该生成器公开所有这些属性,显示实时预览,并发出干净的 CSS,使用repeat()和frunit。因为预览渲染的声明与它输出的声明相同,所以你看到的正是你粘贴的。它完全在你的浏览器中运行,没有注册。
CSS电网生成器解决了什么问题?
CSS Grid 的难点不是复杂,而是抽象,你描述一个结构("三个相等的列,它们之间有一点空间"),浏览器计算几何图形,那个间接就是全部,因为它是让网格在没有单一媒体查询的情况下响应的原因,但是间接很难在你的脑海中保持,你不能看 repeat(3, 1fr) 立即以查看渲染的盒子网格的方式感受到结果。
生成器将写-保存-刷新循环折叠为单个交互,您更改列数,三个框变为四个,您从中切换一个轨道 1fr 到 auto 并且列会按扣到其内容的宽度。您将间隙抬高,盒子会呼吸。十分钟后,分数单位不再是您翻译的符号,而是成为您故意到达的东西。当您完成探索时,您不会留下要转录的注释,因为工作 CSS 已在输出框中为您编写。
还有第二个更安静的好处,通过操纵构建布局迫使工具仅发出有效的、格式良好的 CSS。您无法产生损坏 grid-template-columns value 通过点击,所以输出总是你可以放心粘贴的东西,那个可靠性是我让一组可视化 CSS 构建器靠近而不是从头开始编写每一条规则的原因。
网格容器控制哪些属性?
CSS Grid和flexbox一样,在容器和它的项目之间分担责任,容器定义了轨道和整体结构,而那是大多数布局决策的所在,所以它是生成器关注的地方,以下是每个容器属性所做的事情。
| 财产 | 它控制什么 | 共同值 |
|---|---|---|
grid-template-columns |
列的数量和大小 | repeat(3, 1fr)、 200px 1fr、 auto |
grid-template-rows |
行数和大小 | repeat(2, auto)、 100px、 1fr |
gap |
轨道之间的空间 | 例如,任何长度 16px 或 20px 10px |
justify-items |
沿行轴的物品位置 | stretch、 start、 center、 end |
align-items |
沿柱轴的物品位置 | stretch、 start、 center、 end |
justify-content |
当网格比其容器窄时,在行轴上跟踪位置 | start、 center、 space-between |
align-content |
轨道位置位于柱轴上 | start、 center、 space-between |
制造这根棍子的心理模型是轨道和物品之间的区别。 grid-template-columns 並 grid-template-rows 定义轨道,轨道是网格的空车道。间隙位于这些车道之间。 justify-items 並 align-items 然后,属性将每个项目定位在其占据的单元格内,同时 justify-content 並 align-content 当有空余空间时,将整组轨道放置在容器内。生成器将这两个级别在视觉上保持分开,这样您就可以感受到在其单元格内移动项目与在页面内移动整个网格之间的差异。
Fr单位是什么意思?
的 fr unit是css网格中为整个模型付费的一块,值得理解而不是复制,一个 fr 表示任何固定大小和间隙减去后网格容器中空闲空间的一小部分,如果写 grid-template-columns: 1fr 1fr 1fr,容器's可用宽度分为三个相等的部分,写 2fr 1fr 1fr 1列占用一半的空间,而另外两列则分割其余部分,浏览器在每个大小上重新计算那些分数,这就是为什么基于分数的网格是流动的,没有任何断点。
对于大多数布局来说,这种行为使网格优于百分比。一组 33.33% columns忽略了间隙和溢出,因为百分比加上间隙加起来比容器多,取出间隙后计算分数单位,所以 repeat(3, 1fr) 始终适合间隙。生成器默认为 1fr columns 正是出于这个原因,并且可以看到三个相等的列在你改变间隙时保持它们的比例,如果你想要一个拥抱其内容的列,则切换到 auto、 min-content、或者 max-content 并立即看到差异。
如何进行三列布局?
Zhe是人们用网格构建的最常见的东西之一,配方是两条线。将容器设Zhi display: grid 并给予它 grid-template-columns: repeat(3, 1fr).那产生三个相等的列,这些列流入的内容需要多少行中,加 a. gap 而且您有卡片布局。
在生成器中,您将列数设置为三,然后打开大小 1fr(preview) 列出一个由相等单元格组成的网格, 输出框显示:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, auto);
gap: 16px;
}
通过单击而不是键入来构建这一点值得的原因是,真正的布局从来都不是那么干净。您将希望侧边栏是固定宽度和要弯曲的内容,或者第一行比其他行高。这些更改中的每一个都是在生成器中的一个控件和输出中的一个编辑值,并且在将其提交到样式表之前您会看到效果。如果您仍在为特定块在网格和基于灵活的方法之间做出决定,则 flexbox 生成器 是配套工具,本指南后面的比较解释了每个人何时获胜。
我应该何时在 Flexbox 上使用网格?
2种模型都知道后才是最重要的问题,而老实的回答是看版面有维数,Flexbox是一维的,它沿着单轴、一行或一列排列项目,问了就包网格是二维的,它把行和列控制在一起,所以一个项目可以一次被它的行和它的列都定位。
I使用的实用规则是这样的,如果我把一组东西排成一行,导航栏,一行标签,工具栏,一堆表单字段,即flexbox,如果我把一个行列都需要对齐的结构,一个页眉,侧边栏,内容区的页面外壳,或者一个每张卡片都坐在干净的网格线上的图库,即网格,两者不是对手;一个网格单元格中经常包含一个flex容器,flex项经常是一个小网格,这里是分割为表格。
| 问题 | 柔性盒 | CSS 网格 |
|---|---|---|
| 尺寸 | 一次一个轴 | 行和列在一起 |
| 最好的 | 工具栏、导航、项目行、包装标签 | 页面布局、图库、仪表板、表格 |
| 尺寸驱动 | 内容,然后分发 | 您声明的曲目模板 |
| 对齐 | justify-content、 align-items |
同样的加号 justify-items、 align-content |
| 典型用途 | 网格单元内部 | 整个页面或部分框架 |
生成器使之具体化,因为您可以通过两种方式构建相同的视觉结果,并查看哪些方法产生了更干净的规则。对于等卡的画廊,网格与 repeat() is 两条线和flex是一个包装容器,每个孩子身上都有宽度,对于需要将其物品铺展到边缘的单行,flex with space-between 是较短的路径。
差距、合理内容和对齐内容有什么区别?
这三者经常感到困惑,因为它们都处理空间,但它们在不同的层面上运作。 gap property 设置轨道之间的固定间距,几乎每个网格都会用到它,单个值空间行列相等;两个值分别设置行间隙和列间隙,在顺序行然后列生成器让你独立设置两个间隙,只有当它们不同时才会发出速记,因此输出在情况允许的范围内保持短。
justify-content 並 align-contentzhi,相比之下,只有在网格's轨道比容器小时才做任何事,留有余地进行分配,如果你的列都是固定的像素宽度,它们不填充容器, justify-content: center 将集中整个轨道块,并且 space-between 会把它们推到边缘。与 fr 列(已经填充宽度),这些属性没有什么可分发的,并且看起来什么都不做,这是常见的混淆来源,当它们留在默认值时,生成器会从输出中省略它们 start的, 所以复制规则中的每一行都是有可见效果的,那个只发出有意义的声明的习惯,就是我在the里所依赖的那个 梯度生成器 和 盒影生成器的,因为一条充满禁行的规则,是一眼就无法信赖的规则。
生成器如何保持预览的诚实?
any visual builder 的陷阱是预览和导出的代码可以漂移开来,一个以一种方式渲染其预览并用另一种方式生成其代码的工具比没用更糟糕,因为它教你一个不会重现的布局,这个生成器避免了通过从单个声明列表中同时构建预览和复制的 CSS 决定要发射哪些属性的相同功能是为预览框进行样式化的功能,所以你看到的正是你粘贴的没有单独的渲染路径可以不同意。
这种设计选择就是输出使用的原因 repeat() 对于任何具有多个轨道的轴。单个轨道作为裸露尺寸发射,但两个或多个塌陷成 repeat(n, size)的,这既是人类会写的,也是随着计数的增长而保持规则可读的,这是一件小事,但它是你将运送的输出和你将重写的输出之间的区别。
逐步构建响应式卡网格
这是我经常使用的工作流程。从三列数和大小开始 1fr.你现在有三个相等的、流动的列,把行大小设为 auto so 每行增长以适应其最高的卡。将间隙提高到舒适的东西,大约二十像素的卡。那是一个完整的,响应式卡网格,输出是四行。
为了使其无需媒体查询即可自行包装,真正项目的下一步是交换 repeat(3, 1fr) 为 repeat(auto-fill, minmax(240px, 1fr))的,它告诉浏览器尽可能多地拟合240像素最小列,并拉伸它们来填充生成器给你一个固定计数的起点;那个编辑使它变成一个自包装网格理解起点是使编辑显而易见的原因,那就是通过构建而不是粘贴来学习布局的整个论据组装一组以这种方式工作的工具的更广泛的案例是在片上 web开发人员工具包的,而背后的工作流习惯则在 开发人员生产力工具 指南。
哪些浏览器支持 CSS 网格?
CSS Grid 在当前每个浏览器中都得到支持,并且已经存在多年。该生成器发出的属性是标准且未修复的,因此输出在 Chrome、Firefox、Safari 和 Edge 中工作,对于当今项目现实针对的任何浏览器,没有供应商前缀或后备 gap grid容器中的属性,这是最后一块广泛着陆的,现在也得到了普遍支持。这意味着您复制的css已准备好生产,如书面形式,这在grid的早期并不总是如此,这是模型最终是默认选择而不是渐进增强的原因之一。对于底层规则,来自w3c的css网格布局模块level 1规范是主要来源,一旦生成器给了您遵循它的直觉,就值得阅读。
如果您正在构建一个更广泛的视觉工具包 边框半径生成器 並 CSS 钳形生成器 完成布景,然后 编码工具指南 收集我接触最多的那些。
常见问题
CSS电网生成器是什么?
CSS 网格生成器是一种可视化工具,它从您选择的设置构建 CSS 网格布局代码,您可以选择列、行、轨道大小、间隙和对齐方式,并输出网格模板 CSS 以及结果的实时预览。
CSS网格中的fr单元是什么意思?
Fr单元表示网格容器中自由空间的一小部分网格-模板-列:repeat(3,1fr)创建三列,每列取可用宽度的相等份额,并随着容器的大小而回流。
CSS Grid 和 flexbox 有什么区别?
CSS Grid是一个二维模型,它把行和列控制在一起,非常适合页面布局和卡片网格。Flexbox是一维的,沿着单个轴铺设项目,非常适合工具栏和行。它们是互补的,经常一起使用。
如何制作响应式网格?
Fr单元使用,因此轨道共享可用的宽度,并将repeat()与minmax()结合起来,并自动填充或自动适合自行包裹的网格。该生成器发射repeat(),fr轨道作为起点,您可以扩展。
CSS网格中的间隙属性是什么?
gap 设置网格轨道之间的间距,单个值将行和列都相等地间隔;两个值分别设置行间隙和列间隙,顺序为行间隙然后列间隙。
生成的网格 CSS 在生产中使用安全吗?
是。CSS Grid在每个现代浏览器中都支持,该工具会发出标准,未修复的属性。所有处理都发生在您的浏览器中,因此一旦加载,就不会上传任何内容,工具会离线工作。
CSS 网格生成器在移动设备上工作吗?
是的。该工具响应速度完全,可在手机、平板电脑和台式机上的任何现代浏览器中运行。无论您在何种设备上构建,生成的 CSS 都是相同的。
这台 CSS 网格生成器免费吗?
Yes。完全免费,没有注册,没有水印,没有使用限制,它产生的网格CSS是你在任何项目中使用的。
