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

css基础学习(grid的常用属性初学习)

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

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可为多个数值,将会重复nm的值,等同于 grid-template-columns: m1 m2 m1 m2 ...
  2. 3.2 minmax(a,b);最小值最大值

4.常用属性

  1. 4.1 设置网格单元尺寸的新单位:fr ;设置轨道列宽时可以使用一个新的单位:frfraction),类似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;
  37. /* 2.4 设置网格轨道的列宽 */
  38. /* grid-template-columns: auto;默认值 */
  39. /* grid-template-columns: 10em 10em 10em;设置一个三列两行的布局空间 */
  40. /* 3.1 repeat() */
  41. /* 上面三可用函数repeat(a,b)来缩写
  42. */
  43. grid-template-columns: repeat(3,1fr);
  44. /* 3.2 minmax() */
  45. /* grid-template-columns: 1fr minmax(20em,2fr) 1fr;中间列的最小宽度是20em,最大值是左右列的2倍 */
  46. /* 4.1 fr */
  47. /* grid-template-columns: 1fr 2fr 1fr;中间项目单元的列宽是两边的二倍 */
  48. /* 4.3 设置轨道的行高 */
  49. /* grid-template-rows: auto;默认值 */
  50. grid-template-rows: 3em 3em;/* 第一二行的行高都为3em */
  51. /* 4.2 网格单元的排列方式
  52. */
  53. grid-auto-rows: 3em;/* 行优先时要设置隐式轨道的列宽;如果显式轨道设置了高度,则此属性值只设置隐式轨道的高度,否则将设置所有网格单元的高度;此时,默认项目在容器中是按照行优先的规则进行排列(即先行后列的顺序) */
  54. /* grid-auto-flow: column;设置为列优先 */
  55. /* grid-auto-columns: 1fr;列优先时要设置隐式轨道的行高 */
  56. /* 2.4 设置轨道间距 */
  57. gap: 0.5em 1em ;/* gap: 水平距离 垂直距离;两个距离相等时可省略其一 */
  58. }
  59. /* 2.2 网格项目*/
  60. .container > .item{
  61. /* 默认生成一行N列的容器(N就是项目的数量) */
  62. background-color: cornflowerblue;
  63. padding: 0.5em;
  64. }
  65. /* 4.5 grid-area:;
  66. 编号从左上角开始(1,1)->(行号,列号),并递增
  67. 由右下角开始也可以(-1,-1),并递减
  68. */
  69. .container > .item:nth-of-type(5){
  70. grid-area: 2 / 2 / 3 / 3;/* 第五个网格项目原本的位置 */
  71. grid-area: 1 / 1 / 2 / 2;/* 将第五个网格项目的位置设置到左上角第一个 */
  72. grid-area: 1 / 1;/* 网格项目默认跨越一行一列,将上面简写为此;如果跨越一行或者一列以上,则不可简写 */
  73. grid-area: 1 / 1 / 3 / 4;/* 网格项目跨越2行3列 */
  74. grid-area: 1 / 1 / span 2 / span 3;/* 上面也可写为次 */
  75. background-color: chartreuse;
  76. }
  77. /* 4.5 grid-area 值简写方式 */
  78. .container > .item:first-of-type{
  79. /* grid-area:3 / 1 / span 1 / span 2;当前位置 */
  80. /* grid-area: span 1 / span 2;3 / 1 为当前位置,可省略不写 */
  81. grid-area: auto / span 2;/* 上面简写为此 */
  82. background-color: coral;
  83. }
  84. </style>
  85. </head>
  86. <body>
  87. <!-- 1.grid快速实现圣杯布局dom -->
  88. <header>header</header>
  89. <!-- 主体main应该优先渲染 -->
  90. <main>
  91. <div class="container">
  92. <span class="item">item1</span>
  93. <span class="item">item2</span>
  94. <span class="item">item3</span>
  95. <span class="item">item4</span>
  96. <span class="item">item5</span>
  97. <span class="item">item6</span>
  98. <span class="item">item7</span>
  99. <span class="item">item8</span>
  100. <span class="item">item9</span>
  101. </div>
  102. </main>
  103. <aside class="left">left</aside>
  104. <aside class="right">right</aside>
  105. <footer>footer</footer>
  106. </body>
  107. </html>
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议