基于 CSS Grid 的网页，拆解页面整体布局结构

kooboo china.

于 2025-05-16 10:27:01 发布

阅读量1k

点赞数 16

分类专栏：网站搭建文章标签： html css 编辑器前端

本文链接：https://blog.csdn.net/2501_91137919/article/details/147989334

版权

网站搭建专栏收录该内容

9 篇文章

订阅专栏

通过以下示例拆解网页整体布局结构：

一、基础结构（HTML骨架）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="Globe Trekk - HTML Traveling Template">
</head>
<body>
    <!-- 页面内容 -->
</body>
</html>

代码解释：

DOCTYPE声明：定义HTML版本（如<!DOCTYPE html>）。
HTML根标签：<html lang="zh-CN">（语言声明为中文）。
头部（Head）：
- <meta charset="UTF-8">（支持全球几乎所有的语言字符）。
- <meta http-equiv="X-UA-Compatible" content="IE=edge">（指定网页在 IE 浏览器中的渲染模式）。
- <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">（控制网页在移动设备上的显示方式，实现响应式设计。
- <meta name="description" content="Globe Trekk - HTML Traveling Template">（为网页添加描述信息）
主体（Body）：网页核心内容区域，如页眉、导航、内容区、页脚

二、布局设计

1. 布局模式选择

Flexbox：适合一维布局（横向或纵向排列）。
CSS Grid：适合二维复杂布局（行和列）。
表单布局：输入项为横向排列（PC端）或纵向排列（移动端）

2. 响应式设计

移动端适配：
1. 汉堡式菜单 和 搜索表单 会垂直堆叠。
2. 输入框和按钮宽度调整为 100%，适应小屏幕。

3. 典型布局结构

页眉（Header）
1. 顶部导航栏：
  1. "MENU"（菜单按钮，用于全局导航）。
  2. "BOOK NOW"（行动号召按钮，高亮显示，可跳转至指定页面）
2. Logo：包含文字 "GLOBE" 和 "TREKK"，采用 Logo + 品牌名称的组合，字体较大以强调品牌
主体内容（Main Content）：核心标语 + 搜索/筛选表单 + 行为按钮。

三、核心组件

导航栏（Navbar）：水平或垂直菜单，支持响应式折叠（移动端汉堡菜单）。
内容容器：卡片（Card）、列表（List）、网格（Grid）展示内容。
交互元素：按钮、表单、模态框（Modal）等。
页脚内容：多列链接、社交媒体图标、版权声明。

四、布局结构

整个页面由 contain容器 包裹着，使用 Kooboo 平台 中的 CSS Grid代码生成工具，可视化搭建页面结构，提高开发效率！

1. grid-template-columns

用于定义网格列的尺寸。在左侧 “grid - template - columns” 区域，可以添加多列，每列的值可设置：

fr 单位：代表弹性单位，按比例分配空间。比如设置1fr 1fr 1fr，表示三列将平均分配容器宽度。
px 单位：设置固定像素宽度，如100px ，列宽就是 100 像素。
其他长度单位：像 em、rem 等也可使用，比如2em 。

2. grid-template-rows

用于定义网格行的尺寸，操作和grid-template-columns类似。在 “grid - template - rows” 区域设置：

例如0.2fr 1fr 1fr ，第一行占容器高度的较小比例（0.2 份），后两行按 1:1 比例分配剩余空间。

设置好相关属性值后，点击左侧对应属性旁的 “add” 添加设置，或点击右侧代码区域上方的 “Save” 保存设置，就能应用网格长度设置到对应的.container类元素上。

3. row - gap 和 column - gap

功能：分别用于设置网格行与行之间、列与列之间的间距。当前值都为0px ，意味着网格项之间没有间隙。可修改数值和单位（如 px、em 等）来调整间距大小。

4. Implicit Grid（隐式网格）相关

grid - auto - columns：定义隐式网格列的尺寸。隐式网格列是当在网格容器中放置的内容超出显式定义的网格列时，自动创建的列。点击 “add” 可添加多个设置值。
grid - auto - rows：定义隐式网格行的尺寸。原理同grid-auto-columns，用于设置超出显式定义网格行时自动创建行的大小。
grid - auto - flow：控制隐式网格轨道的生成方向。当前值为row ，表示按行方向自动生成隐式轨道。其他可选值有column（按列方向生成）和dense（用于更紧凑的网格布局，与前两者结合使用）。

5. Grid Placement（网格放置）相关

justify - items：设置网格项在网格轨道水平方向（主轴）上的对齐方式。
1. initial是默认值，其他常见值如start（左对齐）、end（右对齐）、center（居中对齐）等。
align - items：设置网格项在网格轨道垂直方向（交叉轴）上的对齐方式。
1. initial为默认，还有start（顶对齐）、end（底对齐）、center（居中对齐）等取值
justify - content：控制整个网格内容在网格容器水平方向上的对齐方式。
1. initial为默认，还可设为start（左对齐）、end（右对齐）、center（居中对齐）、space - between（两端对齐，中间间隔均匀）等。
align - content：控制整个网格内容在网格容器垂直方向上的对齐方式。
1. initial是默认，也有start（顶对齐）、end（底对齐）、center（居中对齐）、space - between（上下两端对齐，中间间隔均匀）等选项。

6. Area Box（区域框）相关

width 和 height：用于设置网格区域（由grid - template - areas定义的区域）的宽度和高度。当前值为auto ，表示宽度和高度根据内容自动调整，也可设置固定值（如100px ）或百分比值（如50% ）等。

五、总结

通过对 HTML 基础骨架的搭建，以及深入剖析 CSS Grid 各项属性（如定义行列尺寸、设置间距、隐式网格、网格放置、区域框等相关属性），我们能够利用 Kooboo 平台的 CSS Grid 代码生成工具，高效且精准地构建网页整体布局结构。这种可视化且功能丰富的布局方式，为打造美观、响应式的网页提供了有力支持，助力开发者更便捷地实现网页设计需求。