grid php 用法,grid布局主要用法

1. 初识grid布局grid布局页脚网格布局, 格栅布局.

它的布局方式有

类似flex布局, grid布局也有容器和项目的概念, 除此之外,还有:单元格, grid容器可以划分为n行m列个单元格.单元格中放置项目.

网格线, 将grid容器划分为n行m列的直线.

显式网格, 由用户根据项目数量指示容器生成的网格.

隐式网格, 当显式网格数量不足以容纳放入grid容器中的项目时, grid容器会根据缺的网格数量自动生成的网格.

网格区域, 由一个以上的单元格组成的矩形区域. 必须是矩形区域.

网格布局的基本步骤: 1. 生成网格; 2. 放置项目.

2. 创建grid容器display: 声明使用网格布局的容器元素.

grid-auto-flow: 声明项目在网格中自动填充项目的方案(先行再列/先列再行).

grid-template-columns/rows: 在容器中显式的划分行与列, 生成指定数量的单元格.

grid-auto-rows/columns: 根据比显式网格多出的项目数量, 在容器中隐式生成行与列来放置它们.

demo1-创建grid容器, 设置容器的优先布局方向, 设置容器中固定数量的行和列, 设置容器中自动增加的行和列:

创建Grid容器

/* 2.grid容器的样式 */

.container{

/* 2.1.容器大小&背景色 */

width:400px;

height:400px;

background-color:wheat;

/* 2.2.创建grid容器 */

display:grid;

/* 2.3.设置项目在grid容器中的填充方案 */

/* 2.3.1.默认是行优先(先行后列)的方式 */

grid-auto-flow:row;

/* 2.3.2.列优先的方式: */

/* grid-auto-flow: column; */

/* 2.4.通过设置行和列, 显式指定grid容器中生成的单元格数量及其大小 */

/* 例: 三列二行, 行列都设置为100px */

/* 2.4.1.设置列信息: 3列, 每行100px宽 */

grid-template-columns:100px100px100px;

/* 2.4.2.设置行信息: 2列, 每列100px高 */

grid-template-rows:100px100px;

/* 2.5.放置不下的项目(三行两列只能放6个项目,第七个放不下), 会隐式生成单元格来放置第7个单元格 */

/* 当前设置是行优先的填充方案, 所以列数是固定的, 隐式生成会增加行数, 且一次增加一行的单元格.

第7个项目将放在第3行第一个单元格 */

/* 值为auto, 浏览器自动计算隐式生成的单元格的高度, 以填充完剩下的行高 */

grid-auto-rows:auto;

/* 值为像素值, 隐式生成的单元格, 将以像素值为高度生成(单元格) */

grid-auto-rows:150px;

}

1

2

3

4

5

6

7