Grid网格布局

简介: Grid网格布局

网格布局的概念,和fex布局的区别

 

含义:

它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局

区别:Grid 布局与 Flex 布局有一定的相似性,都可以指定容器内部多个项目的位置。但是,它们也存在重大区别。

Flex 布局是轴线布局,只能指定"项目"针对轴线的位置,可以看作是一维布局。

Grid 布局则是将容器划分成"行"和"列",产生单元格,然后指定"项目所在"的单元格,可以看作是二维布局.

网格布局案例: 不规则布局页面(win窗口)

概念: 容器,项目,行,列,单元格,网格线


网格布局中的属性

含义: 网格布局中的属性和flex中的布局属性类似,分为了两类,一类容器属性;

一类是项目属性

容器属性

1、触发网格布局

给父元素添加display::grid

display关于网格的取值分为两个,grid(块网格)和inline-grid(行内网格,行内块)

grid===容器从上向下排列

inline-grid===容器从左向右排列

2、行列划分

规定行属性: grid-template-row:

固定列属性: grid-template-column:

日有卖

代专的早名小

多小列

1)绝对大小(根据列数或者行数确定值的个数)


例: 200px 200px 200px

grid-template-columns:200px 200px 200px

grid-tempTate-rows:200px 200px 200px

2)百分比 (根据列数或者行数确定值的个数)


例: 33.33% 33.33% 33.33%

grid-template-columns: 33.33% 33.33% 33.33%

grid-template-rows : 33.33% 33.33% 33 .33%

行和列宽

度高度

33.33%

3)功能函数: repeat(0)

repeat(参数1,参数2)

重复的次数

重复的数值或者重复的模式

eg:

grid-template-columns : repeat (3,33.33%) :

等同

grid-template-columns :33 .33% 3333% 33.33%

4)auto-fill关键字( 自动填充配合功能函数使用

grid-tempate-columns: repeat(auto-fi11,33.33%):

当项目宽高固定,容器不固定的情况下,自动填充网格列数

5)fr关键字(列宽片段)

为了方便表示比例关系,网格布局提供了fr关键字(fraction 的缩写,意为"片段")。如果两列的宽度分别为

1fr和2fr,就表示后者是前者的两倍。

grid-template-columns:1fr 3fr 1fr :

grid-template-rows:repeat(3,100px):

6)minmax() 功能函数

grid-template-columns: 1fr 1fr minmax(100px,1fr);

minmax(100px,1fr)表示列宽不小于100px,不大于1fr

7)auto 关键字 自动填充


相关文章
|
6月前
|
前端开发 开发者 容器
彻底学会CSS grid网格布局
【4月更文挑战第1天】 彻底学会CSS grid网格布局
94 0
|
6月前
|
Python
tkinter之grid布局
tkinter之grid布局
49 1
|
4月前
|
前端开发 算法 容器
css【详解】grid布局—— 网格布局(栅格布局)(一)
css【详解】grid布局—— 网格布局(栅格布局)(一)
257 1
|
4月前
|
前端开发 开发者 SEO
|
4月前
|
容器
Flex 布局和 Grid 布局的区别
Flex 布局和 Grid 布局的区别
86 0
|
4月前
|
前端开发 容器
css【详解】grid布局—— 网格布局(栅格布局)(二)
css【详解】grid布局—— 网格布局(栅格布局)(二)
139 0
|
6月前
|
前端开发 开发者 容器
flex和grid布局
flex和grid布局
|
6月前
|
开发者
【干货分享】Grid 布局和 Flex 布局
【干货分享】Grid 布局和 Flex 布局
125 0
|
6月前
|
前端开发 开发者 容器
CSS布局模式之Flex布局&Grid布局(二)
CSS布局模式之Flex布局&Grid布局
|
6月前
|
前端开发 容器
CSS布局模式之Flex布局&Grid布局(三)
CSS布局模式之Flex布局&Grid布局