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

grid 简单用法

  • grid-template-rows: 100px 100px 100px; 这个是grid的横向布局
  • grid-template-columns: 100px 100px 100px; 这个是grid的纵向布局
  • grid-template-columns: repeat(3,1fr); repeat(3,1fr)里面有两个参数 第一个是复制几次 第二个是占几份 当然也可以写auto 自动分配比例
  • grid-template-rows: repeat(3,1fr); 这是横向 原理同上
  • 发现一个简写办法 grid-template: repeat(3,1fr)/ repeat(3,1fr); 用斜线隔开 第一个是横向 第二个是纵向
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         .con{
  8.             width: 400px;
  9.             height: 400px;
  10.             background: lightblue;
  11.             display: grid;
  12.             grid-template-rows: 100px 100px 100px;
  13.             grid-template-columns: 100px 100px 100px;
  14.             grid-template: repeat(3,1fr)/ repeat(3,1fr);
  15.             border: 1px solid #ddd;
  16.             gap: 1px 10px;
  17.         }
  18.         .items{
  19.             border: 1px solid #ddd;
  20.             background: #dddddd;
  21.         }
  22.     </style>
  23. </head>
  24. <body>
  26. <div class="con">
  27.     <div class=" items items1">1</div>
  28.     <div class=" items items2">2</div>
  29.     <div class=" items items3">3</div>
  30.     <div class=" items items4">4</div>
  31.     <div class=" items items5">5</div>
  32.     <div class=" items items6">6</div>
  33.     <div class=" items items7">7</div>
  34.     <div class=" items items8">8</div>
  35.     <div class=" items items9">9</div>
  36. </div>
  37. </body>
  38. </html>

grid 的多参数写法

  • 这边用简写 grid-template: 100px 100px 100px / 100px 100px 100px; 可以用px写
  • grid-template: 20% 40% auto /100px auto 100px; 可以用百分比和px，auto 混搭
  • grid-template: 1fr 1fr 2fr/1fr 1fr 1fr; 按照比例写
  • grid-template:repeat(3,1fr)/repeat(3,1fr) ;可以用重复的办法写
  • grid-template:repeat(1,50px 100px 10px 30px 40px)/repeat(3,1fr) ;分组来填写
  • grid-template: repeat(2,minmax(50px ,100px)) /repeat(3,minmax(150px,1fr));弹性设置 第一个参数是最小值 第二是最大值 适用于手机

  • grid-template:repeat(auto-fill,100px)/repeat(auto-fill,100px) ;auto-fill 自动填充

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.  <meta charset="UTF-8">
    5.  <title>设置单元格的数量和大小</title>
    6.  <style>
    7.      .con{
    8.          width: 400px;
    9.          height: 400px;
    10.          background: darkcyan;
    12.          display: grid;
    13.         /*固定值*/
    14.          /*grid-template-columns: 100px 100px 100px;*/
    15.          /*grid-template-rows:100px 100px 100px;*/
    16.          /*!*百分比*!*/
    17.          /*grid-template-columns: 20% 40% auto;*/
    18.          /*grid-template-rows:100px auto 100px;*/
    20.          /*!*按比例*!*/
    21.          /*grid-template-columns: 1fr 1fr 2fr;*/
    22.          /*grid-template-rows:1fr 1fr 1fr;*/
    23.          /*!*重复设置*!*/
    24.          /*grid-template-columns: repeat(3,1fr) ;*/
    25.          /*grid-template-rows:repeat(3,1fr);*/
    26.          /*按分组来设置*/
    27.          /*grid-template-columns: repeat(1,50px 100px 10px 30px 40px) ;*/
    28.          /*grid-template-rows:repeat(3,1fr);*/
    29.          /*弹性设置*/
    30.          /*grid-template-columns:repeat(2,minmax(50px ,100px));*/
    31.          /*grid-template-rows:repeat(3,minmax(150px ,1fr));*/
    33.          /*自动填充 auto-fill*/
    34.          grid-template-columns:repeat(auto-fill,100px);
    35.          grid-template-rows:repeat(auto-fill,100px);
    36.      }
    38.      .item{
    39.          font-size: 2rem;
    40.          background: lightgreen;
    41.      }
    42.  </style>
    43. </head>
    44. <body>
    45. <div class="con">
    46.  <div class="item">1</div>
    47.  <div class="item">2</div>
    48.  <div class="item">3</div>
    49.  <div class="item">4</div>
    50.  <div class="item">5</div>
    51.  <div class="item">6</div>
    52.  <div class="item">7</div>
    53. </div>
    54. </body>
    55. </html>

    使用默认网格线来划分单元格

  • grid-row-start: 1; grid-row-end: 3; grid-column-end: 1;grid-column-start: 3; 操作子元素的操作办法
  • grid-row: 1/3; grid-column: 3/5;简写
  • grid-row: 3/span 2; grid-column: 1/span 2; 使用偏移量 span 是隔几个
  • grid-row-end: span 2; grid-column-end: span 2; 用偏移量 省去代码
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         .con{
  8.             width: 400px;
  9.             height: 400px;
  10.             background: lightblue;
  11.             display: grid;
  12.             /*!*grid-template-rows: 100px 100px 100px;*!*/
  13.             /*!*grid-template-columns: 100px 100px 100px;*!*/
  14.             /*grid-template-columns: repeat(3,auto);*/
  15.             /*grid-template-rows: repeat(3,1fr);*/
  16.             grid-template: repeat(4,1fr)/ repeat(4,1fr);
  18.             gap: 1px 1px;
  19.         }
  20.         .items{
  21.             border: 1px solid #ddd;
  22.             background: #dddddd;
  23.         }
  24.         .items1{
  25.             background: lightgreen;
  26.             grid-row-start: 1;
  27.             grid-row-end: 3;
  28.             grid-column-start: 1;
  29.             grid-column-end: 3;
  34.         }
  35.         .items2{
  36.             background: lightpink;
  37.             grid-row: 1/3;
  38.             grid-column: 3/5;
  39.         }
  40.         .items3{
  41.             background: lightyellow;
  42.             grid-row: 3/span 2;
  43.             grid-column: 1/span 2;
  44.         }
  45.         .items4{
  46.             background: lightcoral;
  47.             grid-row-end: span 2;
  48.             grid-column-end: span 2;
  49.         }
  50.     </style>
  51. </head>
  52. <body>
  54. <div class="con">
  55.     <div class=" items items1">1</div>
  56.     <div class=" items items2">2</div>
  57.     <div class=" items items3">3</div>
  58.     <div class=" items items4">4</div>
  59.     <!--<div class=" items items5">5</div>-->
  60.     <!--<div class=" items items6">6</div>-->
  61.     <!--<div class=" items items7">7</div>-->
  62.     <!--<div class=" items items8">8</div>-->
  63.     <!--<div class=" items items9">9</div>-->
  64. </div>
  65. </body>
  66. </html>

设置命名网格区域

  • grid-template-areas: “header header header””left main right” “footer footer footer”;
  • 在子元素 grid-area: header; 用来命名子元素
  • 简写就是 grid-template-areas: “header header header””…” “footer footer footer”;因为在中间这个本身就是自然分配所以可以用点点点来显示然后 在子元素grid-area: left;删掉即可
  1.  <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         .con{
  8.             width: 400px;
  9.             height: 400px;
  10.             background: lightblue;
  11.             display: grid;
  12.             grid-template: 80px auto 80px/ 40px auto 40px;
  13.             grid-template-areas: "header header header"
  14.             "left main right"
  15.             "footer footer footer";
  16.             gap: 1px 1px;
  17.         }
  18.         .items{
  19.             border: 1px solid #ddd;
  20.             background: #dddddd;
  21.         }
  22.         .items1{
  23.             background: lightgreen;
  24.             grid-area: header;
  25.         }
  26.         .items2{
  27.             background: lightpink;
  28.             grid-area: left;
  30.         }
  31.         .items3{
  32.             background: lightyellow;
  33.             grid-area: main;
  34.         }
  35.         .items4{
  36.             background: lightcoral;
  37.             grid-area:right ;
  38.         }
  39.         .items5{
  40.             background: lavender;
  41.             grid-area: footer;
  42.         }
  43.     </style>
  44. </head>
  45. <body>
  47. <div class="con">
  48.     <div class=" items items1">1</div>
  49.     <div class=" items items2">2</div>
  50.     <div class=" items items3">3</div>
  51.     <div class=" items items4">4</div>
  52.     <div class=" items items5">5</div>
  53.     <!--<div class=" items items6">6</div>-->
  54.     <!--<div class=" items items7">7</div>-->
  55.     <!--<div class=" items items8">8</div>-->
  56.     <!--<div class=" items items9">9</div>-->
  57. </div>
  58. </body>
  59. </html>

子元素在容器中的对齐方式

  • 和felx 差不多行的使用方式
    justify-content: end;
    justify-content: start;
    justify-content: center;
    justify-content: space-between;
    align-content: end;
    align-content: start;
    align-content: center;
    align-content: space-between;

    简写方式为
    /place-content: 垂直对齐 水平对齐;/
    place-content: center start;

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <title>设置单元格在容器中的对齐方式</title>
    6.   <style>
    7.       .con{
    8.           width: 400px;
    9.           height: 400px;
    10.           background: darkcyan;
    11.           display: grid;
    12.           grid-template-columns: repeat(3,50px);
    13.           grid-template-rows:repeat(3,50px);
    14.           justify-content: end;
    15.           justify-content: start;
    16.           align-content: end;
    17.           align-content: start;
    18.           align-content: center;
    19.           justify-content: center;
    20.           justify-content: space-between;
    21.           align-content: space-between;
    22.           grid-template-columns: repeat(3,auto);
    23.           align-content: stretch;
    24.           /*简写*/
    25.           /*place-content: 垂直对齐 水平对齐;*/
    26.           place-content: center start;
    27.       }
    28.       .item{
    29.           font-size: 2rem;
    30.           background: lightgreen;
    31.       }
    33.   </style>
    34. </head>
    35. <body>
    36. <div class="con">
    37.   <div class="item item1">1</div>
    38.   <div class="item item2">2</div>
    39.   <div class="item item3">3</div>
    40.   <div class="item item4">4</div>
    41.   <div class="item item5">5</div>
    42.   <div class="item item6">6</div>
    43.   <div class="item item7">7</div>
    44.   <div class="item item8">8</div>
    45.   <div class="item item9">9</div>
    46. </div>
    47. </body>
    48. </html>

    子元素在容器中的对齐方式

  • place-items: center end; 操纵所有子元素的方法

  • justify-items: stretch; align-items: stretch; justify-content: start; align-items: center; 这些方法使用方式和flex一样 写法不同而已

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.  <meta charset="UTF-8">
    5.  <title>设置项目在单元格中的对齐方式</title>
    6.  <style>
    7.      .con{
    8.          width: 400px;
    9.          height: 400px;
    10.          background: darkcyan;
    12.          display: grid;
    13.          grid-template-columns: repeat(3,1fr);
    14.          grid-template-rows:repeat(3,1fr);
    15.          /*justify-items: stretch;*/
    16.          /*align-items: stretch;*/
    17.          /*justify-content: start;*/
    18.          /*align-items: center;*/
    19.          place-items: center end;
    20.      }
    22.      .item{
    23.          width: 50px;
    24.          height: 50px;
    25.          font-size: 2rem;
    26.          background: lightgreen;
    27.      }
    29.  </style>
    30. </head>
    31. <body>
    32. <div class="con">
    33.  <div class="item item1">1</div>
    34.  <div class="item item2">2</div>
    35.  <div class="item item3">3</div>
    36.  <div class="item item4">4</div>
    37.  <div class="item item5">5</div>
    38.  <div class="item item6">6</div>
    39.  <div class="item item7">7</div>
    40.  <div class="item item8">8</div>
    41.  <div class="item item9">9</div>
    42. </div>
    43. </body>
    44. </html>

    设置某个项目在单元格中的对齐方式

  • justify-self: end; align-self: center; 单独子元素的排列方式

  • place-self: center; 简写

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <title>设置某个项目在单元格中的对齐方式</title>
    6.   <style>
    7.       .con{
    8.           width: 400px;
    9.           height: 400px;
    10.           background: darkcyan;
    11.           display: grid;
    12.           grid-template-columns: repeat(3,1fr);
    13.           grid-template-rows:repeat(3,1fr);
    14.       }
    16.       .item{
    17.           width: 50px;
    18.           height: 50px;
    19.           font-size: 2rem;
    20.           background: lightgreen;
    21.       }
    22.       .item5{
    23.           justify-self: end;
    24.           align-self: center;
    25.           /*简写*/
    26.           place-self: center;
    27.       }
    29.   </style>
    30. </head>
    31. <body>
    32. <div class="con">
    33.   <div class="item item1">1</div>
    34.   <div class="item item2">2</div>
    35.   <div class="item item3">3</div>
    36.   <div class="item item4">4</div>
    37.   <div class="item item5">5</div>
    38.   <div class="item item6">6</div>
    39.   <div class="item item7">7</div>
    40.   <div class="item item8">8</div>
    41.   <div class="item item9">9</div>
    42. </div>
    43. </body>
    44. </html>

    grid的间距

  • 用gap就行很简单
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>设置某个项目在单元格中的对齐方式</title>
    <style>

    1.   .con{
    2.       width: 400px;
    3.       height: 400px;
    4.       background: darkcyan;
    5.       display: grid;
    6.       grid-template-columns: repeat(3,1fr);
    7.       grid-template-rows:repeat(3,1fr);
    8.       /*列间距*/
    9.       column-gap: 5px;
    10.       /*行间距*/
    11.       row-gap: 5px;
    12.       /*简写*/
    13.       gap: 5px 10px;
    14.       /*超级简写*/
    15.       gap: 5px;
    16.   }
    18.   .item{
    20.       font-size: 2rem;
    21.       background: lightgreen;
    22.   }
  1. </style>

</head>

<body>

<div class="con">
<div class="item item1">1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
<div class="item item4">4</div>
<div class="item item5">5</div>
<div class="item item6">6</div>
<div class="item item7">7</div>
<div class="item item8">8</div>
<div class="item item9">9</div>
</div>
</body>
</html>

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

批改状态：合格

老师批语：grid属性太多了, 可以先从最基本的, 最常用的几个先入手
本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系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+教程免费学
    微信扫码登录