微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > 博客列表 > CSS布局：grid布局基本知识
博主信息
博文 145
粉丝 7
评论 7
访问量 202183
专题推荐
更多>
相关推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
CSS布局：grid布局基本知识
李东亚¹⁸⁰³⁹⁵⁴⁰¹²⁰
原创
1852人浏览过

一、网格布局基本概念和术语

1、grid布局又称二维网格布局，主要用于快速布局页面和小区域
2、网格容器：我们通过在元素上声明display：grid，来创建一个网格容器。
3、网格容器中的所有直系子元素成为网格元素。
4、网格轨道：我们通过 grid-template-columns 和 grid-template-rows属性来定义网格中的行和列。这些属性定义了网格的轨道。一个网格轨道就是网格中任意两条线之间的空间。
5、网格单元和网格区域：网格单元有行列（行轨和列轨）交叉的形成的区域称为网格单元，网格单元是网格容器中的最小单元。网格元素可以向行或着列的方向扩展一个或多个单元，并且会创建一个网格区域。网格区域的形状应该是一个矩形；
6、网格间距：在两个网格单元之间的 网格横向间距 或 网格纵向间距

二、网格布局的常见属性单位

1、网格容器设置网格的常见属性值；

属性名 属性值 作用
grid-template-rows px fr em rem % 设置行轨道高度
grid-template-columns px fr em rem % 设置列轨道的宽度
grid-template-areas 常见值;string，一组为一行；例如:grid-template-areas: ‘one one three’’one one six’; 命名网格单元名称
grid-gap row column常见单位值：px em rem 设置各个网格单元之间的（行轨间距和列轨间距）间距
place-items row column常见值：start center end 设置项目在网格单元中的对其方式
place-content row column常见值：start center end 设置网格单元在容器中的整体对其方式
grid-auto-flow 常见值：row、column 设置容器中项目单元的布局流向默认行优先
frid-auto-rows（columns） px fr em rem 设置隐式单元的行高和列宽

示意图：

2、容器中网格项目常见属性

属性 属性值 作用
grid-area 常见属性值：命名单元名称\行号和列号\跨列或者行span 设置项目在占据的网格单元的位置和网格区域
place-self start\center\end 设个某个项目在网格单元中排列方式

3、设置列宽和行高常见的值和函数：

1、fr:自适应容器的宽度和高度，可以通过设置不同值的fr来设置行于行之间（列与列值之间的比列宽度）
2、%：功能与fr类似，但无法自动去除行间距和列间距（容易撑破容器）
3、auto:自适应宽度和高度；但不能同时和fr\%都相邻
4、repeat(n,m)：重复设置指定的列宽或者行高,n重复的个数，m是设置的宽度或者高度，可以是多个值用空格区分开；
5、minmax(m,n):设置某行（某列）的最大最小值，处于两指中间自适用大小
6、auto-fit和auto-fill：自动计算出轨道宽度（高度）填充容器空间

4、grid-area:常见值以及简写用法

1、四值：row-start/column-start/row-end/colunm/end;
2、双值：设置起始行号和列号；起到定位单元格的作用
3、三值：与四值一致，知识省略了列的结束列号
4、单值：设置起始行号，其他全部默认值；auto,全部默认值
5、span混用：span n常用来代替结束行号和结束列号，跨n列（或者行）：

  • 双值：起始行号和列号，可以设置默认值；直接设置跨n列（行）即可；
  • 单值：设置跨n行，列默认

5、grid常见值的使用

1、代码

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>grid布局</title>
  6.         <style>
  7.             *{
  8.                 padding: 0;
  9.                 margin: 0;
  10.                 box-sizing: border-box;
  11.             }
  12.             :root{
  13.                 font-size: 10px;
  14.             }
  15.             .container{
  16.                 width: 60rem;
  17.                 height: 20rem;
  18.                 background-color: #D3D3D3;
  19.                 display: grid;
  20.                 grid-template-columns: repeat(3,10rem);
  21.                 grid-template-rows: repeat(3,4rem);
  22.                 /* 命名网格单元明称 */
  23.                 grid-template-areas: 'one one three'
  24.                                     'one one six';
  25.                 grid-gap: 0.5rem 1rem;
  26.                 /* 项目在网格单元格中的位置 start center end*/
  27.                 place-items: center center;
  28.                 /* 网格单元在容器中的分布 start center end*/
  29.                 place-content: center center;
  30.                 /* 设置网格单元在容器中的自动排列方向，默认为行优先 */
  31.                 grid-auto-flow: row;
  32.                 /* 当容器中的项目数量超过，网格中生成单元个数量时，会生成隐式的单元格，
  33.                 如果自动排列方向为行时，可以设置隐式行高 ；如果自动排列方向位列时可以设置隐式列宽*/
  34.                 /* grid-auto-columns: 10rem; */
  35.                 grid-auto-rows: 3rem;
  36.             }
  37.             .container > .item{
  38.                 width: 8rem;
  39.                 height: 3rem;
  40.                 background-color: #20B2AA;
  41.             }
  42.             .container > .item:first-of-type{
  43.                 grid-area: span 2 / span 1;
  44.                 height: 6rem;
  45.             }
  46.             .container > .item:nth-of-type(4){
  47.                 grid-area:one;
  48.             }
  49.             .container >.item:nth-of-type(2){
  50.                 /* 设置某个项目在网格单元中的排列方式 */
  51.                 place-self: start end;
  52.             }
  54.             .container1{
  55.                 width: 60rem;
  56.                 height: 20rem;
  57.                 background-color: #66CDAA;
  58.                 display: grid;
  59.                 grid-template-columns: repeat(3,14rem);
  60.                 /* grid-template-columns: repeat(auto-fit,minmax(9rem,1fr)); */
  61.                 grid-template-rows: repeat(2,5rem);
  62.                 grid-gap:1rem;
  63.                 place-content: center;
  65.             }
  66.             .container1 > .item{
  67.                 /* width:9rem; */
  68.                 height: 4rem;
  69.                 background-color: #A71D5D;
  70.             }
  72.             .container1 > .item:first-child{
  73.                 grid-area: 1 / 2 / 3;
  74.                 grid-area: 2;
  75.             }
  76.         </style>
  77.     </head>
  78.     <body>
  79.         <div class="container">
  80.             <div class="item">1</div>
  81.             <div class="item">2</div>
  82.             <div class="item">3</div>
  83.             <div class="item">4</div>
  84.             <div class="item">5</div>
  85.             <div class="item">6</div>
  86.             <div class="item">7</div>
  87.         </div>
  88.         <div class="container1">
  89.             <div class="item">1</div>
  90.             <div class="item">2</div>
  91.             <div class="item">3</div>
  92.             <div class="item">4</div>
  93.             <div class="item">5</div>
  94.             <div class="item">6</div>
  95.         </div>
  96.     </body>    
  97. </html>

2、运行效果

批改老师：天蓬老师天蓬老师

批改状态：合格

老师批语：
本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！
全部评论 文明上网理性发言，请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部
    • 登录PHP中文网，和优秀的人一起学习！
    全站2000+教程免费学
    微信扫码登录