CSS grid布局(网格布局)总结

一、grid布局概念

grid布局与flex布局对比
flex布局为一维布局，一般一行或一列的布局使用flex布局。
grid布局为二维布局，同时需要兼顾行与列的布局，可以使用gird布局。
grid布局基本概念
row
column
cell
grid line

二、grid容器

设置容器为grid容器

.container{
   
    display:grid;
}

注 : gird容器内部的元素称为grid容器的项目，grid项目的float属性会失效

<style>
    body{
   
        padding: 0;
        margin: 0;
    }
    .container{
   
        display: grid;
        
        grid-template-columns: 100px 100px 100px;
        grid-template-rows: 100px 100px 100px;

        
        /* 等效于 */
        
        /* grid-template-columns: repeat(3,100px);
        grid-template-rows: repeat(3,100px); */

        /* grid-template-columns: 1fr 1fr minmax(400px,1fr); */

        /* grid-template-columns: 100px auto 100px; */

        /* grid-template-columns: repeat(3, 33.3%); */
        
        /* grid-template-columns: repeat(auto-fill, 100px); */

        /* grid-template-columns: 100px 1fr 2fr; */

        /* grid-template-columns: 70% 30%; */

        /* grid-template-columns: repeat(9,1fr); */


        /* 
        grid-template-columns: 1fr 1fr 2fr;
        grid-template-rows: 1fr 1fr 2fr; 
        */
        /*grid-template-areas: 'a a a'
                       'a a a'
                       'a a a';*/