介绍
今天就跟大家聊聊有关如何在CSS3中使用显示:网格实现网格布的局,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。
<强> 1。网格布局(网格):
它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局;
<强> 2。基本概念:
容器和项目,如图所示:
& lt; div 类=癱ontent"比;
,,,,,,,& lt; div 类=癰"在1 & lt;/div>
,,,,,,,& lt; div 类=癰"在2 & lt;/div>
,,,,,,,& lt; div 类=癰"在3 & lt;/div>
,,,,,,,& lt; div 类=癰"在4 & lt;/div>
,,,,,,,& lt; div 类=癰"在5 & lt;/div>
,,,,,,,& lt; div 类=癰"在6 & lt;/div>
,,,,,,,& lt; div 类=癰"在7 & lt;/div>
,,,,,,,& lt; div 类=癰"在8 & lt;/div>
,,,,,,,& lt; div 类=癰"在9 & lt;/div>
,,,& lt;/div> .content即为容器,。b即为项目。
行和列:行:行;
列:列;
<强> 3。容器属性
显示:网格;//默认是块元素;
显示:inline-grid;//行内块元素
指定一个容器采用网格布的局,
注意:设置为网格后,子元素的浮动,显示:inline-block,显示:表格单元,vertical-align和列- *等设置都将失效。
.content {
,,,,,,,,,,,不必:,0,0,1 px # f6f;
,,,,,,,,,,,显示:,网格;
,,,,,,,,,,,grid-template-columns:, 100 px 100 px 100 px;
,,,,,,,,,,,grid-template-rows:, 100 px 100 px 100 px;
,,,,,,,} <强> 4。属性解释
grid-template-columns:定义每一列的列宽;
grid-template-columns: 100 px 100 px 100 px;//总共三列,每列列宽是100 px;=
grid-template-rows:定义每一行的行高;
grid-template-rows: 100 px 100 px 100 px;//从上至下,每行高度为100 px;
//除了使用像素,还可以使用百分比;
拓展:
重复写值很麻烦,可以用重复函数;
重复(次数,大小),
例如:重复(3100 px);//重复3次,每次100 px;
重复写法:
grid-template-columns:重复(3100 px);
grid-template-rows:重复(3100 px);
也可以重复某一种不固定大小模式;
例如:
grid-template-columns: 100 px 80 px 100 px;
改写成:
grid-template-columns:重复(2100 px 80 px);//代表重复2次100 px 80 px的模式,也就是4列;
等同于:
grid-template-columns: 100 px 80 px 100 px 80 px;
如图:
<强> 5。关键字
1,自动填写,如果容器大小不固定,项目大小固定,可以用自动关键字自动填充;
.content {
,,,,,,,,,,,不必:,0,0,1 px # f6f;
,,,,,,,,,,,显示:,网格;
,,,,,,,,,,,grid-template-columns:,重复(自动,100 px);
} 
2, fr(分数):如果两列的宽度分别为1 fr和2 fr,就表示后者是前者的两倍。
,,, .content {
,,,,,,,,,,,不必:,0,0,1 px # f6f;
,,,,,,,,,,,显示:,网格;
,,,,,,,,,,,grid-template-columns:, 1 fr 2 fr;
,,,,,,,,,,,grid-template-rows:,重复(3,100 px 80 px);
} 
fr也可以和px配合使用;
.content {
,,,,,,,,,,,不必:,0,0,1 px # f6f;
,,,,,,,,,,,显示:,网格;
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
