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*/}