Grid网格布局

首先元素布局方式选择grid

body{
    display:grid;
}

grid-template-columns

分配一行里面占的列数

body{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    /*
    或者用repeat(3,1fr)规定有三列
    */
}

grid-gap行列间距

body{
    display:grid;
    grid-template-columns:1fr 3fr;
    grid-gap:1rem;
    /*
    此时body下的元素的行列间距就都是1rem
    */
}

grid-row-gap行间距不需要再使用margin

body{
    display:grid;
    grid-template-columns:1fr 2fr 1fr;
    grid-row-gap:1rem;
    /*
    同理列间距
    */
}

grid-column-gap列间距同理行间距用法

grid-auto-rows行高

body{
    display:grid;
    grid-template-columns:1fr 2fr 2fr;/* 3 列*/
    grid-auto-rows:minmax(100px,auto);/*minmax()规定了最小行高是100px*/
}

justify-items规定的元素沿着行的起始位置/align-items规定元素沿着列的起始位置排列

start 规定沿着行/列的开始位置排列
end 规定元素沿着行/列的终点位置排列
center 规定元素沿着行/列的中间位置进行排列
stretch 默认值规定元素撑满整个网格

同理元素本身也可以调整自身的行列排列位置==>justify-self/align-self

body{
    display:grid;
    grid-template-columns:1fr 2fr 3fr;
    grid-gap:1rem;
    justify-items:center;
    align-items:center;
}
body div{
    justify-self:start;
    align-self:end;
}

网格布局神器，自定义网格布局模板

grid-template-areas

body{
    /*假设定义了一个三列四行的布局，其中的header，main，footer都是独占一行，由于是三列结构所以他们都是在一行之中占三列*/
    display:grid;
    grid-template-areas:
    'header header header'
    'aside content content'
    'main  main   main '
    'footer footer footer';
    /*这里规定网格布局的模板*/
    grid-gap:1rem;
}
header{
    grid-area:header;
}
aside{
    gird-area:aside;
}
div.content{
    grid-area:content;
}
div.main{
    grid-area:main;
}
footer{
    grid-area:footer;
}
/*网格布局，响应式布局更加简单*/
@media screen and (max-width:720px){
    body{
        /*当屏幕宽度小于720px时候变成了单列单行排列*/
        grid-template-areas:
        'header'
        'aside'
        'content'
        'main'
        'footer'
    }
}