search

博客列表 >html:grid布局相关知识（0413）

html:grid布局相关知识（0413）

ALWAYS
ALWAYS原创
2020年04月15日 14:02:471114浏览

一、创建grid容器，并使用grid-template-columns或者 grid-templater-rows 设置网格，并且使用grid-auto-flow设置行或者列优先。

示意图：行优先或者列优先

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>创建grid容器</title>
  7.     <style>
  8.       .container {
  9.         /* 容器大小 */
  10.         width: 400px;
  11.         height: 400px;
  12.         background-color: thistle;
  13.         /* 创建grid容器 */
  14.         display: grid;
  15.         /* 显示划分 */
  16.         grid-template-columns: 30% 100px 100px;
  17.         grid-template-rows: 100px 100px;
  19.         /* 对于放置不下的单元格，会隐式生成新行,可以自动设置，也可以自定义新行宽度 */
  20.         grid-auto-rows: auto;
  21.         grid-auto-rows: 100px;
  23.         /* 列优先  */
  24.         /* grid-auto-flow: column; */
  26.         /* 行优先 */
  27.         grid-auto-flow: row;
  28.       }
  29.       .item {
  30.         background-color: lightblue;
  31.       }
  32.     </style>
  33.   </head>
  34.   <body>
  35.     <div class="container">
  36.       <div class="item item1">1</div>
  37.       <div class="item item2">2</div>
  38.       <div class="item item3">3</div>
  39.       <div class="item item4">4</div>
  40.       <div class="item item5">5</div>
  41.       <div class="item item6">6</div>
  42.       <div class="item item7">7</div>
  43.     </div>
  44.   </body>
  45. </html>

二、设置单元格的数量和大小

示意图

  • 按百分比划分

    1. grid-template-columns: 30% 20% auto;
    • 按比例划分
    1. grid-template-columns: 2fr 1fr 1fr;
    • 重复设置
    1.       grid-template-columns: repeat(3, auto);
    3.       grid-template-rows: repeat(3), 100px;
  • 按分组设置
  1.  /* 按分组显示（2 代表显示两遍，40px代表第一列显示40px，60px代表第二列显示60px） */       
  2.  grid-template-columns: repeat(2, 40px 60px);
  3.  grid-template-rows: repeat(2, 40px 60px);
  • 弹性显示
    1.  /* 弹性显示 */
    2.       grid-template-columns: repeat(4, minmax(30px, 90px));
    3.       grid-template-rows: repeat(1, minmax(30px, 50px));
  • 自动填充
    1.       /* 自动填充 */
    2.       grid-template-rows: repeat(auto-fill, 100px);
    3.       grid-template-columns: repeat(auto-fill, 100px);

    三、划分网格区域,grid-row-start\grid-row-end;grid-column-start\grid-column-end

  • 1.通过默认的网格线划分单元格
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>划分网格区域</title>
  7.     <style>
  8.       .container {
  9.         /* 容器大小 */
  10.         width: 400px;
  11.         height: 400px;
  12.         background-color: thistle;
  13.         /* 创建grid容器 */
  14.         display: grid;
  15.         grid-template-columns: repeat(4, 100px);
  16.         grid-template-rows: repeat(4, 100px);
  17.         /* 行优先 */
  18.         grid-auto-flow: row;
  19.       }
  21.       .item.item1 {
  22.         background-color: palevioletred;
  23.         grid-row-start: 1;
  24.         grid-row-end: 3;
  25.         grid-column-start: 1;
  26.         grid-column-end: 3;
  27.       }
  28.       .item.item2 {
  29.         background-color: purple;
  30.         grid-row-start: 3;
  31.         grid-row-end: 5;
  32.         grid-column-start: 3;
  33.         grid-column-end: 5;
  34.       }
  35.       .item.item3 {
  36.         background-color: seagreen;
  37.         grid-row-start: 1;
  38.         grid-row-end: 3;
  39.         grid-column-start: 3;
  40.         grid-column-end: 5;
  41.       }
  42.     </style>
  43.   </head>
  44.   <body>
  45.     <div class="container">
  46.       <div class="item item1">1</div>
  47.       <div class="item item2">2</div>
  48.       <div class="item item3">3</div>
  49.       <div class="item item4">4</div>
  50.     </div>
  51.   </body>
  52. </html>
  • 通过偏移量来简化，简写
  1. /* 跨行跨列 */
  2.       .item.item1 {
  3.         background-color: palevioletred;
  4.         grid-row-start: 1;
  5.         grid-row-end: span 2;
  6.         grid-column-start: 1;
  7.         grid-column-end: span 3;
  8.       }
  9.       /* 简写 */
  10.       .item.item2 {
  11.         background-color: purple;
  12.         grid-row: 3/5;
  13.         grid-column: 3/5;
  14.       }
  1.  -  使用默认位置，只使用偏移量
  2. ![](https://img.php.cn/upload/image/970/620/811/1586913056687363.png) 
  4. ```css
  5.   .item.item1 {
  6.     background-color: palevioletred;
  7.     grid-row-end: span 1;
  8.     grid-column-end: span 2;
  9.   }
  10.   ```

四、使用命名网格线划分单元格

  1.  .item.item1 {
  2.         /* 默认跨一行一列、 */
  3.         background-color: red;
  4.         grid-row-start: r1-end;
  6.         grid-column-start: c1-start;
  7.       }
  8.       .item.item2 {
  9.         background-color: green;
  10.         grid-column-start: c1-start;
  11.         /* grid-row-end: r2-start; */
  12.         /* grid-column-end: c3-end; */
  13.         grid-column-end: span 3;
  14.       }
  15.       .item.item3 {
  16.         background-color: pink;
  17.         grid-column-end: span 2;
  18.         grid-row-end: span 2;
  19.       }

五、默认网格区域(grid-area)

  1.  .item.item1 {
  2.         /* 默认跨一行一列、 */
  3.         background-color: lightgrey;
  4.         /* grid-area: 1/1/2/5; */
  5.         /* 当前位置省略，而且可以使用偏移量 */
  6.         grid-area: span 1 / span 4;
  7.       }
  8.       /* 列默认并一列，可以省略 */
  9.       .item.item2 {
  10.         background-color: lightgreen;
  11.         grid-area: span 3;
  13.       }

六、命名网格区域

  • 设置命名网格区域的属性grid-template-area,相同名称的命名区域会合并。
  1.     .container {
  2.         /* 容器大小 */
  3.         width: 400px;
  4.         height: 400px;
  5.         /* background-color: thistle; */
  6.         /* 创建grid容器 */
  7.         display: grid;
  8.         border: 1px solid black;
  9.         grid-template-columns: 80px 1fr 80px;
  10.         grid-template-rows: 40px 1fr 40px;
  11.         grid-template-areas:
  12.           "header header header"
  13.           "left main right"
  14.           "footer footer footer";
  15.       }

七、网格区域占位符“…”用三个点做占位符

  2.  grid-template-areas:
  3.           "header header header"
  4.           ". . ."
  5.           "footer footer footer";

八、默认的网格名称（header-start起始行 起始列；header-end 结束列结束行）

  1.   .item.item1 {
  2.         /* 默认跨一行一列、 */
  3.         background-color: lightgrey;
  4.         grid-area: header-start/header-start/header-end/header-end;
  5.       }

九、设置单元格在容器中的对齐

justify-conent 容器内的行对齐；
align-content 容器内的列对齐；
居中对齐

  1.       justify-content: center;
  2.         align-content: center;

平均对齐

  1. justify-content: space-evenly;
  2. align-content: space-evenly;

space-content 垂直靠end，水平对齐:

  1.  place-content: end space-around;

项目在单元格的对齐方式

水平居中：justify-items 垂直居中：aligh-items
简写：space-items:垂直，水平；

  1.       /* 项目对齐 */
  2.         justify-items: center;
  3.         align-items: center;
  4.         text-align: center;
  5.         /* 项目对齐简写 */
  6.         place-items: start center;

  1.     .item.item5 {
  2.         /* align-self: start;
  3.         justify-self: end; */
  4.         place-self: start end;

十、间隙 gap align-gap justify-gap

  1. gap:5px

总结

  • 1 . gird 不同与flex布局方式，是一个二维的布局方法，优化界面设计。
  • 2 .display：grid 默认使项目纵向排列，增加grid-template属性后，划分网格。
  • 3 .使用grid-auto-flow 属性设置行优先或者列优先。
  • 4 .使用grid-auto-rows对于放置不下的单元格，会隐式生成单元格,可以使用auto属性自动填充，也可以使用具体像素定义行宽。
  • 5 .按比例划分单元格 单位 fr ，可以划分自由空间的比例。
  • 6 .比例使用auto后，后面的比例会失效。
  • 7 .自动填充 repeat（auto-fill,100px）优先级要高于弹性和重复设置。
  • 8 . grid布局是先画格子，然后再根据划分好的格子放置项目。根据起始位置划分区域，先写的优先排序。
  • 9 .简写可以通过 grid-row：1/3方式、偏移量方式 grid-row：1/span 2方式、根据当前位置，省略起始位置，只使用偏移量方式。
  • 10 .利用好单元格的默认起始点，直接设置终止行和列，可以简写代码。
  • 11 . grid-area 可以实现行和列的简写、偏移量的简写，并且可以和默认起始位置合并使用。
  • 12 . grid-template-area 功能很强大，布局简单，给每个区域起个名字，然后相同名称的会合并。
  • 13 . “…”占位符可以简化网格区域，一个点占一个格，由浏览器自动计算空间，可以起到简化代码的作用。

  • 14 .设置单元格在容器内对齐
    justify-content aligh-content 默认是拉伸,与flex相同。
    简写：place-content:垂直方向，水平方向；

  • 15 . 容器中的项目对齐最好使用place-content 属性，单元格中项目对齐，最好使用 place-items 属性；单独对齐使用place-self.

    1. 单元格间的间隙 align-gap justify-gap ,简写 gap，不能使用margin、和 padding。
上一条：新浪短网址怎么生成_最新新浪短网址接口分享！下一条：Shiro RememberMe 1.2.4 反序列化命令执行漏洞复现
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多