search

博客列表 >css基础学习（grid的常用属性初学习）

css基础学习（grid的常用属性初学习）

景云
景云原创
2021年03月01日 13:01:04807浏览

1.grid 快速实现两边固定、中间自适应、主体优先渲染的圣杯布局。

圣杯布局要求主体区优先显示，根据浏览器渲染顺序，主体应该写到前面去。

2.grid 简介

  1. 2.1 网格容器：由若干个矩形网格单元构成。

flex 中子元素默认为 inline 元素；grid 中子元素默认为 block 元素

  1. 2.2 网格项目:网格容器中的子元素，必须放在放个单元中。
  2. 2.3 网格单元：有“单元格”和“网格区域”两种表现形式。
  3. 2.4 网格轨道：由多个网格单元组成，根据排列方向有“行轨”和“列轨”之分。
  4. 2.5 轨道间距：容器中轨道之间的间距，有“行轨间距”和“列轨间距”。
  5. 2.6 显式轨道与隐式轨道：当声明的网格单元数量不能将所有网格项目存入时，多出来的网格项目将会放入自动生成的网格空间中，这时，原来声明的网格单元叫“显式轨道”，自动生成的网格单元叫“隐式轨道”，隐式轨道的高度时自动的。

3.设置网格单元的常用函数

  1. 3.1 repeat(n,m):多个网格单元的列宽是一样的时候可以使用,n代表个数，m代表列宽，m可为多个数值，将会重复n遍m的值，等同于 grid-template-columns: m1 m2 m1 m2 ...
  2. 3.2 minmax(a,b);最小值最大值

4.常用属性

  1. 4.1 设置网格单元尺寸的新单位：fr ；设置轨道列宽时可以使用一个新的单位：fr（fraction），类似flex中的收缩因子；

fr、%、px、em 可以混合使用，但是最好不要同时使用;auto 和 fr 不要同时使用;auto、%、px、em 可以混合使用，但是最好不要同时使用。

  1. 4.2 网格单元的排列方式：grid-auto-flow:;
  2. 4.3 隐式轨道的行高：grid-auto-rows:;
  3. 4.4 显式轨道的列宽: grid-auto-columns:;
  4. 4.5 自定义项目在容器的显示位置：grid-area:行开始编号 / 列开始编号 / 行结束编号 / 列结束编号;(设置任何一个项目所在网格单元的区域)；参数数量不同，意义不同。
  5.     4.5.1 参数中有span时
  6.          单值：夸的行数;例：grid-area:span 3;表示位置在原先行/原先列，占据三行
  7.          双值：夸的行与列，如果只想设置一个参数的值，则另外一个要写auto；例：grid-area:span 3 / span 2;占据三行 两列。
  8.     4.5.2 参数中没有span时：
  9.         双值：没有span，默认夸n行/m列；例：grid-area:3 / 2;的位置在第三行第二列;
  10.         三值：省了列结束编号（或者叫夸得列数）;例：grid-area:3 / 2 / span 3;的位置在第三行第二列并占据三行;
  11.         四值：最完整的写法。
  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>display:grid; 属性简介</title>
  7.     <style>
  8.         /* 1.圣杯布局*/
  9.         *{
  10.             margin: 0;
  11.             padding: 0;
  12.             box-sizing: border-box;
  13.         }
  14.         html{
  15.             font-size: 20px;
  16.         }
  17.         body{
  18.             display: grid;
  19.             grid-template-columns: 15em minmax(50vw,auto) 15em;
  20.             grid-template-rows: 3em minmax(80vh,auto) 3em;
  21.             gap: 0.5em;
  22.         }
  23.         header,footer{
  24.             grid-area: span 1 / span 3;/* 占据一行三列 */
  25.         }
  26.         main{
  27.             grid-area: 2 / 2;/* 在第二行第二列的位置 */
  28.         }
  29.         body *{
  30.             /* background-color: coral; */
  31.             border: coral 1px solid;
  32.         }
  33.         /* 2.1 网格容器 */
  34.         .container{
  35.             display: grid;
  36.             padding: 0.5em;
  38.             /* 2.4 设置网格轨道的列宽 */
  39.              /* grid-template-columns: auto;默认值 */
  40.              /* grid-template-columns: 10em 10em 10em;设置一个三列两行的布局空间 */
  42.             /* 3.1 repeat() */
  43.             /* 上面三可用函数repeat(a,b)来缩写 
  44.             */
  45.             grid-template-columns: repeat(3,1fr);
  47.             /* 3.2 minmax() */
  48.             /* grid-template-columns: 1fr minmax(20em,2fr) 1fr;中间列的最小宽度是20em，最大值是左右列的2倍 */
  49.             /* 4.1 fr  */
  50.             /* grid-template-columns: 1fr 2fr 1fr;中间项目单元的列宽是两边的二倍 */
  52.              /* 4.3 设置轨道的行高 */
  53.              /* grid-template-rows: auto;默认值 */
  54.              grid-template-rows: 3em 3em;/* 第一二行的行高都为3em */
  56.             /* 4.2 网格单元的排列方式
  57.             */
  58.             grid-auto-rows: 3em;/* 行优先时要设置隐式轨道的列宽；如果显式轨道设置了高度，则此属性值只设置隐式轨道的高度，否则将设置所有网格单元的高度；此时，默认项目在容器中是按照行优先的规则进行排列（即先行后列的顺序） */
  59.             /* grid-auto-flow: column;设置为列优先 */
  60.             /* grid-auto-columns: 1fr;列优先时要设置隐式轨道的行高 */
  62.              /* 2.4 设置轨道间距 */
  63.             gap: 0.5em 1em ;/* gap: 水平距离 垂直距离;两个距离相等时可省略其一 */
  64.         }
  65.         /* 2.2 网格项目*/
  66.         .container > .item{
  67.             /* 默认生成一行N列的容器（N就是项目的数量） */
  68.             background-color: cornflowerblue;
  69.             padding: 0.5em;
  70.         }
  71.         /*  4.5 grid-area:;
  72.         编号从左上角开始（1，1）->（行号，列号），并递增
  73.         由右下角开始也可以（-1，-1），并递减
  74.         */
  75.         .container > .item:nth-of-type(5){
  76.             grid-area: 2 / 2 / 3 / 3;/* 第五个网格项目原本的位置 */
  77.             grid-area: 1 / 1 / 2 / 2;/* 将第五个网格项目的位置设置到左上角第一个 */
  78.             grid-area: 1 / 1;/* 网格项目默认跨越一行一列，将上面简写为此;如果跨越一行或者一列以上，则不可简写 */
  79.             grid-area: 1 / 1 / 3 / 4;/* 网格项目跨越2行3列 */
  80.             grid-area: 1 / 1 / span 2 / span 3;/* 上面也可写为次 */
  81.             background-color: chartreuse;
  82.         }
  83.         /* 4.5 grid-area 值简写方式 */
  84.          .container >  .item:first-of-type{
  85.              /* grid-area:3 / 1 / span 1 / span 2;当前位置 */
  86.              /* grid-area: span 1 / span 2;3 / 1 为当前位置，可省略不写 */
  87.              grid-area: auto / span 2;/* 上面简写为此 */
  88.              background-color: coral;
  89.          }
  90.     </style>
  91. </head>
  92. <body>
  93.     <!-- 1.grid快速实现圣杯布局dom -->
  94.     <header>header</header>
  95.     <!-- 主体main应该优先渲染 -->
  96.     <main>
  97.         <div class="container">
  98.             <span class="item">item1</span>
  99.             <span class="item">item2</span>
  100.             <span class="item">item3</span>
  101.             <span class="item">item4</span>
  102.             <span class="item">item5</span>
  103.             <span class="item">item6</span>
  104.             <span class="item">item7</span>
  105.             <span class="item">item8</span>
  106.             <span class="item">item9</span>
  107.         </div>
  108.     </main>
  109.     <aside class="left">left</aside>
  110.     <aside class="right">right</aside>
  111.     <footer>footer</footer>
  112. </body>
  113. </html>
上一条：JQuery入门：DOM属性操作和CSS样式操作下一条：JS原生态写法实现网页经典动画：选项卡|轮播图|懒加载
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多