php如何设置表格的行距,grid的基础知识

什么是Grid

基于行与列的二维空间布局

网格容器

由若干个矩形网格单元构成；

使用了属性display: grid就是网格容器；

默认是块元素；

网格单元

单元格|网格区域

网格项目

网格容器中的子元素就是网格项目；

默认生成1行N列的容器(N就是项目的数量)

网格轨道

由多个网格单元组成

轨道就是行和列

设置列 grid-template-columns :

设置轨道的行高 grid-template-rows :

轨道间距

容器中轨道之间的间距；

轨道间距 gap ： 水平 垂直；

实现一个简单俩列三行

.container{

display:grid;

border:1pxsolid#ccc;

grid-template-columns:10em10em;

grid-template-rows:2em2em2em;

}

.item{

background-color:aquamarine;

border:1pxsolid#ccc;

}

1

2

3

4

5