Community Learn Tools Library Leisure
search
English
Home > List of blog posts > css基础学习（grid的常用属性初学习）
Blogger Information
Blog 40
fans 0
comment 1
visits 34607
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
css基础学习（grid的常用属性初学习）
景云
Original
780 people have browsed it

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>
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post