CSS入门笔记——Grid布局

成为container

.container{
    display: grid | inline-grid;
}

行和列

.container{
        grid-template-columns:40px 50px auto 50px 40px;
        grid-template-rows:25% 100px auto
}

item设置范围

.items-a{
    grid-column-start:2;     /*列开始*/
    grid-column-end:3;       /*列结束*/
    grid-row-start:1;        /*行开始*/
    grid-row-end:3;          /*行结束*/ 
}

fr-free space

 .container{
   grid-template-columns:1fr 1fr 1fr;
 }

 .container{
   grid-template-columns:1fr 50% 1fr 1fr;
 }

分区grid-template-areas

空隙gap

grid-column-gap:10px; grid-row-gap:10px;