APP正在开发中...
返回顶部
您的位置： 主页 > 网页 > css >

收藏
分享到

前端CSS Grid 布局介绍

css 来源：互联网 作者：佚名 发布时间：2025-04-16 19:22:30 人浏览
摘要

CSS Grid 布局详解（通俗易懂版） 一、概述 CSS Grid 是一种二维布局系统，可以同时控制行和列，相比 Flex（一维布局），更适合用在整体页面布局或复杂模块结构中。 二、基础概念 Grid 容器（

CSS Grid 布局详解（通俗易懂版）

一、概述

CSS Grid 是一种二维布局系统，可以同时控制行和列，相比 Flex（一维布局），更适合用在整体页面布局或复杂模块结构中。

二、基础概念

  • Grid 容器（Container）：设置 display: grid 的元素。
  • Grid 项目（Item）：容器中的直接子元素。
  • 轨道（Track）：行或列。
  • 单元格（Cell）：行列交叉的区域。
  • 网格线（Line）：行或列的边界，编号从 1 开始。

三、创建 Grid 容器

1

2

3

.container {

  display: grid;

}

四、定义网格行和列

1

2

3

4

.container {

  grid-template-columns: 100px 1fr 2fr;

  grid-template-rows: 50px auto;

}

grid-template-columns/rows 用于定义列/行的数量与宽度

  • px：固定宽度
  • fr：按比例分配空间（如 1fr）
  • auto：根据内容自动撑开

示例解释：定义了 3 列（100px、1 份、2 份）和 2 行（第一行固定 50px，第二行自动撑开）。

五、设置行列间距

1

2

3

4

grid-column-gap: 10px;

grid-row-gap: 20px;

/* 简写形式 */

gap: 20px 10px; /* row-gap column-gap */

六、项目在网格中的定位

1

2

3

4

.item {

  grid-column: 1 / 3; /* 跨两列：第1列开始，第3列前结束 */

  grid-row: 1 / 2;     /* 跨一行 */

}

说明：类似在 Excel 中选择 A1 到 B1。

七、自动填充与自适应布局

1

grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  • repeat()：重复列
  • auto-fill：尽可能多地填充
  • minmax()：定义最小最大宽度

效果：列宽至少 150px，宽度不够就自动换行，适合响应式布局。

八、对齐方式

1. 控制单元格内项目对齐

1

2

justify-items: start | end | center | stretch;

align-items: start | end | center | stretch;
  • justify-items：水平方向对齐
  • align-items：垂直方向对齐

2. 控制整个网格在容器中对齐

1

2

justify-content: start | center | end | space-between | space-around | space-evenly;

align-content: start | center | end | stretch;

九、命名区域（语义化布局）

1

2

3

4

5

6

7

8

9

10

11

12

13

.container {

  display: grid;

  grid-template-areas:

    "header header"

    "sidebar main"

    "footer footer";

  grid-template-columns: 200px 1fr;

  grid-template-rows: auto 1fr auto;

}

.header  { grid-area: header; }

.sidebar { grid-area: sidebar; }

.main    { grid-area: main; }

.footer  { grid-area: footer; }

说明：使用区域名定义布局结构，清晰直观、语义明确。

十、grid 简写写法

1

2

3

4

5

grid: auto / 100px 1fr 1fr;

/* 等价于：

grid-template-rows: auto;

grid-template-columns: 100px 1fr 1fr;

*/

十一、常用属性速查表

属性名 说明
display: grid 开启 Grid 布局
grid-template-columns 定义列宽
grid-template-rows 定义行高
grid-column 控制项目跨列范围
grid-row 控制项目跨行范围
gap / row-gap / column-gap 设置网格间距
grid-area 命名区域
justify-items / align-items 控制格子内项目对齐方式
justify-content / align-content 控制整个网格对齐方式

十二、总结

  • Grid 是一种强大而灵活的二维布局系统。
  • 通过 grid-template-* 系列属性可精确控制行列数量和尺寸。
  • 使用 fr 单位和 auto-fill 可轻松实现响应式。
  • 命名区域提升语义性和可维护性。
版权声明 : 本文内容来源于互联网或用户自行发布贡献，该文观点仅代表原作者本人。本站仅提供信息存储空间服务和不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权， 违法违规的内容， 请发送邮件至2530232025#qq.cn(#换@)举报，一经查实，本站将立刻删除。

您可能感兴趣的文章 :

原文链接 :
相关文章

  • 前端高级CSS用法介绍

    前端高级CSS用法介绍
    在前端开发中，CSS（层叠样式表）不仅是用来控制网页的外观和布局，更是实现复杂交互和动态效果的关键技术之一。随着前端技术的不断
  • CSS去除a标签的下划线的几种方法
    在 CSS 中，去除a标签（超链接）的下划线主要有以下几种方法： 使用text-decoration属性 通用选择器设置：使用a标签选择器，将text-decoration属
  • CSS will-change属性介绍
    will-change 是一个 CSS 属性，用于告诉浏览器某个元素在未来可能会发生哪些变化。这可以帮助浏览器优化渲染性能，提前做一些准备工作，从

  • CSS Padding和Margin区别介绍

    CSS Padding和Margin区别介绍
    CSS Padding 和 Margin 全解析 CSS 中的padding和margin是两个非常基础且重要的属性，它们用于控制元素周围的空白区域。理解这两个属性的区别和用
  • 前端CSS Grid 布局介绍
    CSS Grid 布局详解（通俗易懂版） 一、概述 CSS Grid 是一种二维布局系统，可以同时控制行和列，相比 Flex（一维布局），更适合用在整体页面
  • css中的vertical-align与line-height作用介绍
    一、vertical-align的作用与适用元素 1. 作用 vertical-align用于控制行内元素（inline）或表格单元格（table-cell）的垂直对齐方式。 不适用于块级元
  • CSS中z-index属性的作用及在什么情况下会失效
    大白话谈谈 CSS 中z - index属性的作用及在什么情况下会失效。 1. z-index 属性的作用 在 CSS 里，z-index属性就像是一个楼层控制器。想象一下网
  • CSS @media print使用
    @media print是 CSS 中的打印媒体查询，用于定义仅在打印文档时生效的样式规则。通过它，你可以优化网页的打印效果，比如隐藏不必要的元素

  • CSS实现高频出现的复杂怪状按钮之镂空的内凹圆

    CSS实现高频出现的复杂怪状按钮之镂空的内凹圆
    你可以在这里看到：CodePen Demo -- CSS Various Button Shapes | CSS 各种造型按钮 接下来几篇文章中，将在上述基础上，额外补充一些在日常设计稿中
  • CSS3实现动态旋转加载样式的代码
    要使用 CSS3 创建一个动态旋转加载样式，可以使用 CSS 动画和旋转变换。下面是一个简单的示例： HTML： 1 div class=loader/div CSS： 1 2 3 4 5 6 7
推荐阅读
最新更新
友情链接
  • 本站所有内容来源于互联网或用户自行发布，本站仅提供信息存储空间服务，不拥有版权，不承担法律责任。如有侵犯您的权益，请您联系站长处理！
  • Copyright © 2017-2022 F11.CN All Rights Reserved. F11站长开发者网 版权所有 | 苏ICP备2022031554号-1 | 51LA统计