圣杯 CSS 网格布局 — 就绪代码
直观地设计 CSS 网格布局：设置列、行和间隙，然后在单元格中输入区域名称以构建网格模板区域 - 具有实时预览和可复制的 CSS 和 HTML。
处理中...
0%
结果
此页面打开预加载了圣杯布局的网格生成器：三列三行，页眉和页脚跨越整个宽度，中间有导航/主/旁行。标题行使用自动高度，中间行填充剩余空间，两侧列固定为 200px，而主列占据其余空间。
圣杯布局之所以得名，是因为在 CSS Grid 出现之前，它确实很难可靠地构建——多年的浮动黑客、表格布局和绝对定位试图伪造这种精确的形状。通过 grid-template-areas，它可以折叠为五个命名区域和一些轨道大小，这就是为什么它仍然是 CSS 网格教学的标准第一个示例。
此页面上的每个数字和间隙仍然有效：缩小侧列、添加第四行或重命名区域，预览和可复制 CSS 会立即更新。将 CSS 和 HTML 块直接复制到您的项目中 - 一切都在浏览器本地运行，不会上传任何内容。