css新特性 css-Gird布局

一.概述：

网格布局（Grid）是最强大的 CSS 布局方案；
它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的 CSS 框架达到的效果，现在浏览器内置了

容器里面的水平区域称为"行"（row），垂直区域称为"列"（column）

二.容器和项目

 <div id="box">
        <span>这是Gaid布局</span>
        <div id="container">
            <div class="item item-1">1</div>
            <div class="item item-2">2</div>
            <div class="item item-3">3</div>
            <div class="item item-4">4</div>
            <div class="item item-5">5</div>
            <div class="item item-6">6</div>
            <div class="item item-7">7</div>
            <div class="item item-8">8</div>
        </div>
    </div

采用网格布局的区域，称为"容器"（container）。容器内部采用网格定位的子元素，称为"项目"（item）
上面代码中，idcontainer为元素就是容器，内层的8个< div >元素就是项目

三.容器属性

 #container{
        display:grid;

    }

容器指定了网格布局以后，接着就要划分行和列。grid-template-columns属性定义每一列的列宽，grid-template-rows属性定义每一行的行高

 #container{
        display:grid;
        /*  grid-template-columns :第一个40%表示第一个元素，后面有几个元素一行就会有几个元素 */
        grid-template-columns:  40% 25% 15% 20% ;   //也可以单独使用绝对单位如px
       /* 下面代码指定了一个四行四列的网格，高都是50% */
        grid-template-rows: 50% 50% 50% 50%; 
    }

（1）repeat()

有时候，重复写同样的值非常麻烦，尤其网格很多时。这时，可以使用repeat()函数，简化重复的值。上面的代码用repeat()改写如下

 #container{
        display:grid;
        grid-template-columns:repeat(4,25%) ;  
        grid-template-rows: repeat(4,50%); 

    }

1.repeat()接受两个参数，第一个参数是重复的次数，第二个参数是所要重复的值。

2.repeat()重复某种模式也是可以的

（2）auto-fill 关键字

有时，单元格的大小是固定的，但是容器的大小不确定。如果希望每一行（或每一列）容纳尽可能多的单元格，这时可以使用auto-fill关键字表示自动填充

#container{
        grid-template-columns:repeat(auto-fill,100px) ;  
    }

（3）auto-fill 关键字

为了方便表示比例关系，网格布局提供了fr关键字（fraction 的缩写，意为"片段"）。如果两列的宽度分别为1fr和2fr，就表示后者是前者的两倍

 #container{
        grid-template-columns: 1fr 1fr 1fr 1fr ;  
        //上面表示两个相同宽度的列
    }

fr可以与绝对长度的单位结合使用，这时会非常方便

#container{
        grid-template-columns: 150px 1fr 1fr ;  
    }

（4）minmax()

minmax()函数产生一个长度范围，表示长度就在这个范围之中。它接受两个参数，分别为最小值和最大值

 #container{
        grid-template-columns: 1fr 1fr minmax(100px, 1fr)  
    }

面代码中，minmax(100px, 1fr)表示列宽不小于100px，不大于1fr

（5）auto 关键字

auto关键字表示由浏览器自己决定长度

 #container{
        grid-template-columns: 100px auto 100px;
    }

（6）布局实例

grid-template-columns属性对于网页布局非常有用。两栏式布局只需要一行代码

#container{
        grid-template-columns: 70% 30%
    }

上面代码将左边栏设为70%，右边栏设为30%

传统的8网格布局，写起来也很容易

 #container{
        grid-template-columns: repeat(8, 1fr)
    }

后缀gap 属性

grid-row-gap ；
grid-column-gap ；
grid-gap

grid-row-gap属性设置行与行的间隔（行间距），grid-column-gap属性设置列与列的间隔（列间距）

 #container{
        grid-template-columns: repeat(3, 1fr);
        row-gap: 20px;  //每一行之间间隔20px
        column-gap: 40px;  //每一列之间间隔40px
        
	//grid-gap属性是column-gap和row-gap的合并简写形式，语法如下
	//也可以写成下面这样，效果一致
	.container {
	  grid-gap: 20px 40px;
	}
    }

grid-template-areas 属性

网格布局允许指定"区域"（area），一个区域由单个或多个单元格组成。grid-template-areas属性用于定义区域

#container{
        grid-template-columns:100px 100px 100px ;
        grid-template-rows:100px 100px 100px; 
        grid-template-areas: 'a b c'
                       'd e f'
                       'g h i';
    }

上面代码先划分出9个单元格，然后将其定名为a到i的九个区域，分别对应这九个单元格

grid-auto-flow 属性

划分网格以后，容器的子元素会按照顺序，自动放置在每一个网格。默认的放置顺序是"先行后列"，即先填满第一行，再开始放入第二行，即下图数字的顺序

这个顺序由grid-auto-flow属性决定，默认值是row，即"先行后列"。也可以将它设成column，变成"先列后行"

这个顺序由grid-auto-flow属性决定，默认值是row，即"先行后列"。也可以将它设成column，变成"先列后行

设置了column以后，放置顺序就变成了下图

后缀items 属性，

1.justify-items

2.align-items

3.place-items

justify-items属性设置单元格内容的水平位置（左中右），align-items属性设置单元格内容的垂直位置（上中下）

justify-items: start | end | center | stretch;
align-items: start | end | center | stretch;

#container{
        display:grid;
    	 justify-items: start | end | center | stretch;
	  	align-items: start | end | center | stretch;
    }
    

下面图片一次是，start,center,end 对齐效果

 justify-items: stretch   
 表示项目大小没有指定时，拉伸占据整个网格容器

justify-content 属性， align-content 属性， place-content 属性

.container {
justify-content: start | end | center | stretch | space-around | space-between | space-evenly;

align-content: start | end | center | stretch | space-around | space-between | space-evenly;
}

#container{
        display:grid;
        grid-template-columns: repeat( 3,20%);
        grid-template-areas: 'a b c'
                            'd e f'
                            'g h i';  
    }
 #container{
        justify-content: start;

    }

 #container{
        justify-content: center;
    }

#container{
        justify-content: end;
    }

stretch - 项目大小没有指定时，拉伸占据整个网格容器。

space-around - 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与容器边框的间隔大一倍

space-between - 项目与项目的间隔相等，项目与容器边框之间没有间隔

space-evenly - 项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔

四.感谢阮一峰作者

本文参照阮一峰作者的素材，以下是原文作者的地址：
http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html
阮一峰作者博客包含的内容详述的更深刻和详细，请大家可以去看看