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;

}

grid php 用法,grid布局主要用法相关推荐

Android TabLayout(选项卡布局)简单用法实例分析
本文实例讲述了Android TabLayout(选项卡布局)简单用法.分享给大家供大家参考,具体如下: 我们在应用viewpager的时候,经常会使用TabPageIndicator来与其配合.达到 ...
Ext2 常见界面界面(grid分页、窗口布局、下拉框级联)
先上图这中间遇到grid分页和下拉comboBox级联(用户.地域) 源代码如下: /**//* * Ext JS Library 2.0.2 * Copyright(c) 2006-2008, ...
从Grid R-CNN到Grid R-CNN Plus：基于网格的目标检测演化
作者丨孙明珊学校丨哈尔滨工业大学(深圳)硕士生研究方向丨目标检测研究动机 Grid R-CNN 是一种将传统两阶段检测算法中对于矩形框坐标回归转换成由 FCN 构建物体网格点的方法,由于同一水平 ...
Compound Words UVA - 10391（c++用法中substr函数用法+map实现）
题意: 给出字典中一堆单词,单词的输入方式是以字典序输入的.问:在这一堆单词中,有那些单词是通过其它两个单词组合而来的.按字典序升序输出这些单词. 题目: You are to find all th ...
[root@dg1 ~]# su - grid ---切换到grid用户
[root@dg1 ~]# su - grid ---切换到grid用户 [grid@dg1 ~]$ asmcmd ---进入asm磁盘 ASMCMD> ls DATA/ ASMCMD> ...
stpcpy和stpncpy用法 strcpy和strncpy用法
文章目录 strncpy, strncpy_s参考文档用法 strcpy, strncpy实例 strcpy, strncpy用法举例运行结果 stpcpy()和stpncpy()用法上的区别(C语 ...
java中extends用法_JAVA的extends用法
理解继承是理解面向对象程序设计的关键.在Java中,通过关键字extends继承一个已有的类,被继承的类称为父类(超类,基类),新的类称为子类(派生类).在Java中不允许多继承. (1)继承 cla ...
map函数作用c语言,c语言中map的用法：map基本用法
c++中map容器提供一个键值对容器,那么你知道map的用法有哪些吗,下面秋天网 Qiutian.ZqNF.Com小编就跟你们详细介绍下c语言中map的用法,希望对你们有用. c语言中map的用法:m ...
c 语言中set的用法,C++中set用法详解
1.关于set C++ STL 之所以得到广泛的赞誉,也被很多人使用,不只是提供了像vector, string, list等方便的容器,更重要的是STL封装了许多复杂的数据结构算法和大量常用数据结构 ...

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

grid php 用法,grid布局主要用法相关推荐

最新文章

热门文章