grid布局属性介绍

grid布局方式

grid布局就是网格布局，首先来了解几个基本内容

网格容器：有若干个矩形网格单元构成
网格项目：网格容器的子元素，必须放在网格单元中
网格单元：有单元格和网格区域两种表现形式
网格轨道：由多个网格单元组成，根据排列方向有行轨和列轨之分
轨道间距：容器中轨道之间的间距，有行轨间距有列轨间距
网格容器
声明为grid布局的元素称为网格容器
display:grid;
容器内项目变为块级元素

设置轨道的宽度使用属性grid-template-columns
例如：grid-template-columns:10em 10em 10em设置了三列，每列宽为10em
设置轨道的行高grid-template-rows
例如：grid-template-rows:5em 5em
设置了两行，每行高5em
设置轨道的间隙gap:水平垂直
例如：gap:0.5em 1em设置了每行间距0.5em 每列间距 1em
网格轨道宽度单位 fr
设置轨道宽度使用fr,跟flex的伸缩因子异曲同工。相当于划分比例！
grid-template-columns:1fr 2fr 1fr划分三列，中间的那列是两边的二倍。
fr与其他单位混合使用
如固定单位em，px等，计算是将固定值减去，剩下的空间再分配给fr
注意：fr尽量不要和auto，%等混合使用，因为这三者都是相对单位，都它们可以触发各自不同的计算机制，无法确定！

<style>
/* 网格容器 */
.container{
 border:1px solid #000;
 padding: 0.5em;
display: grid;
/*中间一列的宽度是两边的3倍 */
grid-template-columns: 1fr 3fr 1fr;
/* 使用百分比的话，会超div的宽度，因为百分比没有办法将轨道间距计算在内 */
grid-template-columns: 20% 60% 20%;
/*将5em的宽度减去，剩下的交由fr分配，第三列是第二列的两倍*/
grid-template-columns: 5em 1fr 2fr;
 /* 设置轨道的行高 */
grid-template-rows: 5em 5em;
/* 设置轨道的间隙 */
gap: 0.5em 1em;
}
</style>
<body>
   <div class="container">
       <span class="item">item1</span>
       <span class="item">item2</span>
       <span class="item">item3</span>
       <span class="item">item4</span>
       <span class="item">item5</span>
       <span class="item">item6</span>
    </div>
</body>

网格布局常用的函数

repeat(次数n,宽度m可为多个值)
就是宽度值m 重复了 n次
grid-template-columns:10em 10em 10em可以写为grid-template-columns:repeat(3,10em)
如：repeat(2,10em 2em) = 10em 2em 10em 2em
也可以这样写
repeate(2,1fr) 2fr=1fr 1fr 2fr
minmax()最小值
minmax(20em,40em)就是最小为20em最大为40em
grid-template-columns: 1fr minmax(20em,2fr) 1fr;
最小宽度是20em，最大宽度是左右两边的2倍
网格项目排列方式
当设置好了网内容器内的行列，后又增加了几个项目，那新增的怎么处理？

显式轨道：就是开始设置好了的轨道
隐式轨道：后来增加的项目或未设置的项目存放到自动生成的轨道
默认排列顺序：
网格容器默认的排列方式先行后列的顺序
修改顺序：
如果要先列则使用属性grid-auto-flow设置而隐式轨道的高度是自动的如果要设置则使用grid-auto-rows:5em表示在水平排列时增加的项目行高是5em。
当列优先，设置列宽grid-auto-columns:2fr

网格项目属性

网格容器的内部都是有编号的，从左上角开始(1，1)并递增
grid-area:设置任何一个项目所在的网格单元的区域
grid-area:行起使编号 /列起始编号 /行结束编号 /列结束编号

如图所示：先不考虑负数。1，2，3分别表示轨道之间的间隙通道，跨的也是这些通道

比如：项目5的起始位置就是 2/2结束位置是3/3
现在将项目5放到项目1的位置，就是
1/1/2/2
项目默认跨越一行一列，结束位置可不写
grid-area:1/1;
但是要跨越1行以上或一列以上就要写上
例如：跨越2行3列
grid-area:1/1/3/4;
通常只关心跨几行或几列，并不关心结束的编号可以使用span来表示跨的数量
grid-area: 1 / 1 /span 2 /span 3;
如果当前位置不变，则起始位置编号可以不写
grid-area:span 1/span 3;
起始位置不变，只是跨的行数，不跨列
grid-area:span3;
起始位置不变，只是跨的列数,前面用auto表示
grid-area:auto /span 3;

总结：
grid-area:参数数量不同，意义不同
1.值中只有span
单值：跨的行数
双值：跨的行与列数，如果只想设置列数，就必须设置行数(auto)
2.值中有span和编号
双值：没有span 默认跨1行1列 grid-area:2 / 3;
三值：省了列的结束编号或跨的数量，此时前面的值可使用auto
四值：最完整的语法。

<style>
.container{
    border: 1px solid #000;
    padding: .5em;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-template-rows: 5em 5em;
    /* 自动生成的隐式轨道的高度是自动的 */
    grid-auto-rows: 5em;
     gap:0.5em
    /* 列优先 */
    /* grid-auto-flow: column; */
    /* grid-auto-columns: 1fr; */
    }
.container>.item{
    background-color: lightcyan;
     border: 1px solid #000;
    padding: 0.5em;
    }
     /* 以第5个项目来举例 */
.container>.item:nth-of-type(5){
   background-color: lightyellow;
         /* 将它放入到第一个网格单元中 */
         /* 默认项目是跨越一行一列 所以结束位置不用写*/
         grid-area: 1/1;
         /* 但是如果要跨越1行以上或1列以上，就不能省 */
         /* 例如要跨2行3列 */
         grid-area: 1/1/3/4;
         /* 通常只关心跨几行或几列，并不关心结束的编号可以使用span来表示跨的数量*/
         grid-area: 1 / 1 /span 2 /span 3;
     }
     .container>.item:nth-of-type(1){
         background-color: limegreen;
         /* 跨1行 3列 */
         /* grid-area:3/1/ span 1 /span 3 */
         /* 因为 3/1是还是起始位置，所以可以省略 */
         grid-area:span 1 /span 3;
         /* 跨的行数 */
         /* grid-area:span 3; */
         /* 跨的列数 */
         /* grid-area:auto /span 3; */
     }
</style>
<body>
   <div class="container">
       <span class="item">item1</span>
       <span class="item">item2</span>
       <span class="item">item3</span>
       <span class="item">item4</span>
       <span class="item">item5</span>
       <span class="item">item6</span>
        <span class="item">item7</span>
        <span class="item">item8</span>
        <span class="item">item9</span>
    </div>
</body>

grid布局方式

网格容器

网格轨道宽度单位 fr

网格布局常用的函数

网格项目排列方式

网格项目属性

相关文章