Grid笔记

假使设定HTML:

<div class="container">
    <div class="item"><p></p></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

在container中必须设定display:grid才会有作用，且只会影响到item，再往下层便不会有影响。比如item中的p就无法被grid影响。

grid-gap: 能够设定方块与方块之间的距离，但.contaner的边上不会出现距离。

此外grid-gap也能这麽用:

grid-column-gap:15px; /*影响了垂直向的间距*/
grid-row-gap:15px; /*影响了横向的间距 */
/*如此方块之间便能产生15px的间距*/

.container{
display:grid;
grid-template-rows: 50px 50px 50px 50px 50px /*rows一定要加s*/
grid-template-columns: 100px 100px 100px 100px 100px; /*columns一定要加s*/
}