CSS:前端布局——网格布局Grid
Grid网格布局介绍
- 网格布局(Grid)是一种更为强大的CSS布局方案,就像是flex布局的升级版。Grid将元素划分成一个个网格,实现任意组合,做出各种布局。
- 相较于felx布局,Flex 布局是轴线布局,只能指定"项目"针对轴线的位置,可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列",产生单元格,然后指定"项目所在"的单元格,可以看作是二维布局。
Grid布局属性
Grid 布局的属性分成两类。一类定义在容器上面,称为容器属性;另一类定义在项目上面,称为项目属性。这部分先介绍容器属性。
一、display 属性
display: grid
指定一个容器采用网格布局。<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>.container{display: grid;grid-template-columns: 50px 50px 50px;grid-template-rows: 50px 50px 50px;}.item{font-size: 24px;text-align: center;border: 1px solid #fff;}</style> </head> <body style="padding-left: 500px;padding-top: 300px;"><span style="font-size: 24px">head</span><div class="container"><div class="item item1" style="background-color: Aqua;">1</div><div class="item item2" style="background-color: Blue;">2</div><div class="item item3" style="background-color: Fuchsia;">3</div><div class="item item4" style="background-color: Green;">4</div><div class="item item5" style="background-color: Maroon;">5</div><div class="item item6" style="background-color: Navy;">6</div><div class="item item7" style="background-color: Olive;">7</div><div class="item item8" style="background-color: Red;">8</div><div class="item item9" style="background-color: Yellow;">9</div></div><span style="font-size: 24px">foot</span> </body> </html>
运行效果:
display: inline-grid
指定指定元素为行内元素,采用网格布局。
代码同上,display改为inline-grid
运行效果:
ps:设为网格布局以后,容器子元素(项目)的float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效。
二、grid-template-columns 属性、grid-template-rows 属性
指定子元素为网格布局后,可以使用
grid-template-columns
和grid-template-rows
属性指定每一列的列宽
和每一行的行高
。
如:指定一行3行3列宽高均为80的元素。.container{display: inline-grid;grid-template-columns: 80px 80px 80px;grid-template-rows: 80px 80px 80px; }
除了使用绝对高度,也可以使用百分比。(需要指定父元素的宽高。)
.container{width: 306px;height: 306px;display: inline-grid;grid-template-columns: 33.3% 33.3% 33.3%;grid-template-rows: 33.3% 33.3% 33.3%; }
当元素数量过多时,显然全部写出来会非常繁琐。此时可以使用
repeat()
函数。repeat()函数接收两个参数值,第一个参数值是重复的次数,第二个参数是重复的值。
如:将上述用repeat()重写后为:、.container{width: 306px;height: 306px;display: inline-grid;grid-template-columns: repeat(3,33.3%);grid-template-rows: repeat(3,33.3%); }
除了接收固定的次数与值,
repeat()
函数也可以接收重复的次数和某种模式。
如:列宽定义重复两次,每次三列,第一列宽度为33px,第二列宽度为66px,第三列宽度为99px
行高定义重复两次,每行高33%.container{width: 306px;height: 306px;display: grid;grid-template-columns: repeat(2, 33px 66px 99px);grid-template-rows: repeat(2,33%); }
运行效果:
有时,单元格的大小是固定的,但是容器的大小不确定。如果希望每一行(或每一列)容纳尽可能多的单元格,这时可以使用
auto-fill
关键字表示自动填充。
如:指定元素每列宽度为300px,然后自动填充,直到容器不能放置更多的列。.container{display: grid;grid-template-columns: repeat(auto-fill, 300px);grid-template-rows: repeat(2,100px); }
如:指定元素每列宽度为100px,然后自动填充,直到容器不能放置更多的列。.container{display: grid;grid-template-columns: repeat(auto-fill, 100px);grid-template-rows: repeat(2,100px); }
如:指定元素每列宽度为60px,然后自动填充,直到容器不能放置更多的列。.container{display: grid;grid-template-columns: repeat(auto-fill, 60px);grid-template-rows: repeat(2,100px); }
为了方便表示比例关系,网格布局提供了
fr
关键字(fraction 的缩写,意为"片段")。如果四列的宽度分别为1fr、2fr、4fr、6fr,就表示后面每列依次为第一列2倍、4倍、6倍。.container{display: grid;grid-template-columns: 1fr 2fr 4fr 6fr;grid-template-rows: repeat(3,33%); }
fr
关键字可以与绝对宽度配合使用,非常方便。.container{display: grid;grid-template-columns: 100px 1fr 2fr 1fr 100px;grid-template-rows: repeat(2,100px); }
minmax()
函数产生一个长度范围,表示长度就在这个范围之中。它接受两个参数,分别为最小值和最大值。
如:表示列宽不小于100px,不大于3fr。.container{display: grid;grid-template-columns: 1fr 2fr minmax(100px, 3fr);grid-template-rows: repeat(3,100px); }
auto
关键字表示由浏览器自己决定长度。
如:第一列和第三列为100px,第二列自动调节。第二列的宽度,基本上等于该列单元格的最大宽度,除非单元格内容设置了min-width
,且这个值大于最大宽度。.container{display: grid;grid-template-columns: 100px auto 100px;grid-template-rows: repeat(3,100px); }
grid-template-columns
属性和grid-template-rows
属性里面,还可以使用方括号
,指定每一根网格线的名字,方便以后的引用。
如:代码指定网格布局为3行 x 3列,因此有4根垂直网格线和4根水平网格线。方括号里面依次是这八根线的名字。
网格布局允许同一根线有多个名字,比如[fifth-line row-5]
。.container{display: grid;grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4]; }
实用案例
① 两栏布局.wrapper {display: grid;grid-template-columns: 70% 30%; }
② 十二网格
grid-template-columns: repeat(12, 1fr);
三、grid-row-gap 属性、grid-column-gap 属性、grid-gap 属性
grid-row-gap
属性设置行与行的间隔(行间距),grid-column-gap
属性设置列与列的间隔(列间距)。
如:指定每行每列之间间距20px.container{display: grid;grid-template-columns: repeat(3, 100px);grid-template-rows: repeat(3, 100px);grid-row-gap: 20px;grid-column-gap: 20px;}
grid-gap
是grid-column-gap
grid-row-gap
合并简写。语法:grid-gap: <grid-row-gap> <grid-column-gap>;
如果grid-gap省略了第二个值,浏览器认为第二个值等于第一个值。
如:上述代码用grid-gap改写.container{display: grid;grid-template-columns: repeat(3, 100px);grid-template-rows: repeat(3, 100px);grid-gap: 20px 20px; }
- 根据最新标准,上面三个属性名的
grid-
前缀已经删除,grid-column-gap
和grid-row-gap
写成column-gap
和row-gap
,grid-gap
写成gap
。
四、grid-template-areas 属性
网格布局允许指定"区域"(area),一个区域由单个或多个单元格组成。grid-template-areas
属性用于定义区域。
如:下述代码先划分出9个单元格,然后将其定名为a
到i
的九个区域,分别对应这九个单元格。
.container{display: grid;grid-template-columns: 100px 100px 100px;grid-template-rows: 100px 100px 100px;grid-template-areas: 'a b c''d e f''g h i';
}
如:多个单元格合并成一个区域的写法如下。将9个单元格分成a
、b
、c
三个区域。
.container{display: grid;grid-template-columns: 100px 100px 100px;grid-template-rows: 100px 100px 100px;grid-template-areas: 'a a a''b b b''c c c';
}
如:实例顶部是页眉区域header
,底部是页脚区域foote
r,中间部分则为main
和sidebar
。
.container{display: grid;grid-template-columns: 100px 100px 100px;grid-template-rows: 100px 100px 100px;grid-template-areas: "header header header""main main sidebar""footer footer footer";
}
如果某些区域不需要利用,则使用"点"(.)表示。
.container{display: grid;grid-template-columns: 100px 100px 100px;grid-template-rows: 100px 100px 100px;grid-template-areas: 'a . a''b b .''. c c';
}
注意,区域的命名会影响到网格线。每个区域的起始网格线,会自动命名为区域名-start,终止网格线自动命名为区域名-end。比如,区域名为header,则起始位置的水平网格线和垂直网格线叫做header-start,终止位置的水平网格线和垂直网格线叫做header-end。
五、grid-auto-flow 属性
划分网格以后,容器的子元素会按照顺序,自动放置在每一个网格。默认的放置顺序是"先行后列",即先填满第一行,再开始放入第二行,即下图数字的顺序。
这个顺序由grid-auto-flow
属性决定,默认值是row
,即"先行后列"。也可以将它设成column
,变成"先列后行"。
.container{display: grid;grid-template-columns: 100px 100px 100px;grid-template-rows: 100px 100px 100px;grid-auto-flow: column;
}
grid-auto-flow
属性除了设置成row
和column
,还可以设成row dense
和column dense
。这两个值主要用于,某些项目指定位置以后,剩下的项目怎么自动放置。
如:指定1、2各占两个单元格,在默认情况下,3会跟在2后面,形成以下样式
.container{display: grid;grid-template-columns: 100px 100px 100px;grid-template-rows: 100px 100px 100px 100px;grid-auto-flow: row;
}
.item{font-size: 24px;text-align: center;border: 1px solid #fff;
}
.item1, .item2{grid-column-start: 1;grid-column-end: 3;
}
设置grid-auto-flow: row dense;
表示"先行后列",并且尽可能紧密填满,尽量不出现空格。形成以下样式:
.container{display: grid;grid-template-columns: 100px 100px 100px;grid-template-rows: 100px 100px 100px 100px;grid-auto-flow: row dense;
}
如果设置grid-auto-flow: column dense;
,改为先列后行,出现以下样式。
.container{display: grid;grid-template-columns: 100px 100px 100px;grid-template-rows: 100px 100px 100px 100px;grid-auto-flow: column dense;
}
六、justify-items 属性、align-items 属性、place-items 属性
和flex
布局类似,justify-items
属性设置单元格内容的水平位置(左中右),align-items
属性设置单元格内容的垂直位置(上中下)。
.container {justify-items: start | end | center | stretch;align-items: start | end | center | stretch;
}
这两个属性可以取以下值:
start
:对齐单元格的起始边缘。end
:对齐单元格的结束边缘。center
:单元格内部居中。stretch
:拉伸,占满单元格的整个宽度(默认值)。
.container{display: grid;grid-template-columns: 100px 100px 100px;grid-template-rows: 100px 100px 100px;justify-items: start;
}
.container{display: grid;grid-template-columns: 100px 100px 100px;grid-template-rows: 100px 100px 100px;justify-items: center;
}
place-items属性是align-items属性和justify-items属性的合并简写形式。
place-items: <align-items> <justify-items>;
如果省略第二个值,则浏览器认为与第一个值相等。
.container{display: grid;grid-template-columns: 100px 100px 100px;grid-template-rows: 100px 100px 100px;place-items: start end;
}
七、justify-content 属性、align-content 属性、place-content 属性
justify-content
属性是整个内容区域在容器里面的水平位置(左中右),align-content
属性是整个内容区域的垂直位置(上中下)。
.container {justify-content: start | end | center | stretch | space-around | space-between | space-evenly;align-content: start | end | center | stretch | space-around | space-between | space-evenly;
}
这两个属性可以取以下值:
start
:对齐容器的起始边框。end
:对齐容器的结束边框。center
: 容器内部居中。stretch
:项目大小没有指定时,拉伸占据整个网格容器。space-around
:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与容器边框的间隔大一倍。space-between
:项目与项目的间隔相等,项目与容器边框之间没有间隔。space-evenly
:项目与项目的间隔相等,项目与容器边框之间也是同样长度的间隔。
如:start
.container{width: 350px;height: 350px;border: 1px solid #000;display: grid;grid-template-columns: 100px 100px 100px;grid-template-rows: 100px 100px 100px;justify-content: start;
}
center
space-around
space-between
place-content
属性是align-content
属性和justify-content
属性的合并简写形式。
place-content: <align-content> <justify-content>
如:
.container{width: 350px;height: 350px;border: 1px solid #000;display: grid;grid-template-columns: 100px 100px 100px;grid-template-rows: 100px 100px 100px;place-content:center space-evenly ;
}
八、grid-auto-columns 属性、grid-auto-rows 属性
有时候,一些项目的指定位置,在现有网格的外部。比如网格只有3列,但是某一个项目指定在第5行。这时,浏览器会自动生成多余的网格,以便放置项目。
grid-auto-columns
属性和grid-auto-row
s属性用来设置,浏览器自动创建的多余网格的列宽和行高。它们的写法与grid-template-columns
和grid-template-rows
完全相同。如果不指定这两个属性,浏览器完全根据单元格内容的大小,决定新增网格的列宽和行高。
如:
.container{display: grid;grid-template-columns: 100px 100px 100px;grid-template-rows: 100px 100px 100px;grid-auto-rows: 50px;
}
.item{font-size: 24px;text-align: center;border: 1px solid #fff;
}
.item8{grid-row-start: 4;grid-column-start: 2;
}
九、grid-template 属性、grid 属性
grid-template
属性是grid-template-columns
、grid-template-rows
和grid-template-areas
这三个属性的合并简写形式。
grid
属性是grid-template-rows
、grid-template-columns
、grid-template-areas
、 grid-auto-rows
、grid-auto-column
s、grid-auto-flow
这六个属性的合并简写形式。
从易读易写的角度考虑,还是建议不要合并属性
项目属性
一、grid-column-start 属性、grid-column-end 属性、grid-row-start 属性、grid-row-end 属性
项目的位置是可以指定的,具体方法就是指定项目的四个边框,分别定位在哪根网格线。
- grid-column-start属性:左边框所在的垂直网格线
- grid-column-end属性:右边框所在的垂直网格线
- grid-row-start属性:上边框所在的水平网格线
- grid-row-end属性:下边框所在的水平网格线
.container{display: grid;grid-template-columns: 100px 100px 100px;grid-template-rows: 100px 100px 100px;
}
.item{font-size: 24px;text-align: center;border: 1px solid #fff;
}
.item2{grid-column-start: 2;grid-column-end: 4;
}
这四个属性的值,除了指定为第几个网格线,还可以指定为网格线的名字。
.item-1 {grid-column-start: header-start;grid-column-end: header-end;
}
这四个属性的值还可以使用span
关键字,表示"跨越",即左右边框(上下边框)之间跨越多少个网格。
.item-1 {grid-column-start: span 2;
}
二、grid-column 属性、grid-row 属性
grid-column
属性是grid-column-start
和grid-column-end
的合并简写形式
grid-row
属性是grid-row-start
属性和grid-row-end
的合并简写形式。
grid-column: / ;
grid-row: / ;
.item-1 {grid-column: 1 / 3;grid-row: 1 / 2;
}
/* 等同于 */
.item-1 {grid-column-start: 1;grid-column-end: 3;grid-row-start: 1;grid-row-end: 2;
}
三、grid-area 属性
grid-area属性指定项目放在哪一个区域。
.item-1 {grid-area: e;
}
1号项目位于e区域
grid-area
属性还可用作grid-row-start
、grid-column-start
、grid-row-end
、grid-column-end
的合并简写形式,直接指定项目的位置。
.item {grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
}
四、justify-self 属性、align-self 属性、place-self 属性
justify-self
属性设置单元格内容的水平位置(左中右),跟justify-items
属性的用法完全一致,但只作用于单个项目。
align-self
属性设置单元格内容的垂直位置(上中下),跟align-items
属性的用法完全一致,也是只作用于单个项目。
.item {justify-self: start | end | center | stretch;align-self: start | end | center | stretch;
}
这两个属性都可以取下面四个值。
- start:对齐单元格的起始边缘。
- end:对齐单元格的结束边缘。
- center:单元格内部居中。
- stretch:拉伸,占满单元格的整个宽度(默认值)。
CSS:前端布局——网格布局Grid相关推荐
- css响应式网格布局生成器_如何使用网格布局模块使用纯CSS创建响应表
css响应式网格布局生成器 TL; DR (TL;DR) The most popular way to display a collection of similar data is to use ...
- CSS 学习笔记 - 网格布局(栅格系统)
CSS 学习笔记 - 网格布局(栅格系统) 开启网格模式 基本概念 属性说明 容器属性 内容属性 效果展示 grid-template-rows.grid-template-columns 基本用法 ...
- css【详解】grid布局—— 网格布局(栅格布局)
网格布局(Grid)是最强大的 CSS 布局方案 grid布局 和 flex布局的区别 Flex 布局是轴线布局,只能指定"项目"针对轴线的位置,可以看作是一维布局. Grid 布 ...
- CSS布局—网格布局Grid(一)
CSS网格可以定义由行和列组成的二维布局,然后将元素放置到网格中.有些元素可能只占据网格的一个单元,另一些元素则可能占据多行或多列.网格的大小既可以精确定义,也可以根据自身内容自动计算.你既可以将元素 ...
- css里面的网格布局
那么首先来说说一下CSS 中 Grid 网格布局与 Grid 栅格系统的关系 CSS跟Grid布局没有半毛钱关系,Grid只不过是人们在遵循CSS规范的框架内摸索出来的一个最佳实践,你完全可以不鸟栅格 ...
- CSS弹性布局网格布局
一.Flexbox 弹性框布局模块,可更轻松设计灵活的响应式布局,而无需使用浮动或定位. 首先应给容器设置display 属性 <div class="flex-container&q ...
- Grid 布局 - 网格布局
目录 一.什么是Grid布局 二.容器属性值 2.1 grid-template-rows和grid-template-columns 2.1.1 grid-template-columns 2.1. ...
- 【鸿蒙 HarmonyOS】UI 布局 ( 网格布局 TableLayout )
文章目录 一.网格布局 TableLayout 一.网格布局 TableLayout 网格布局 需要设置整个布局中有多少行 , 多少列 , 每个单元格都可以设置一个组件 , 这个组件可以是单个 , 也 ...
- 安卓学习笔记11:常用布局 - 网格布局
文章目录 零.学习目标 一.网格布局概述 1.布局特点 2.继承关系图 3.常用属性 (1)针对布局的属性 (2)针对子控件的属性 二.案例演示--计算器界面 (一)运行效果 (二)涉及知识点 (三) ...
- android 多行布局,android布局-网格布局
网格布局 自android4.0版本后新增的GridLayout网格布局的一些基本内容 GridLayout布局使用虚细线将布局划分为行,列和单元格,也支持一个控件在行,列上都有交错排列 GridLa ...
最新文章
- Java 中的语法糖,真甜。
- android x86 按键精灵,界面版按键精灵的使用【包含内置浏览器、打开程序的方法】...
- 2015年国际智慧教育展览会盛大开幕
- 设置图片格式为php,php 将bmp图片转为jpg等其他任意格式的图片
- html5显示字幕信息,HTML5 Placeholder实现input背景文字提示效果
- 浮点数的表示和基本运算 【转载】
- 常量指针与指针常量勘误
- python modbus tk 库_python modbus_tk模块学习笔记(rtu slaver例程)
- 引用类型--Object类型、Array类型
- 在Ubuntu下后台持续运行Python程序
- 安装程序无法创建新的系统分区也无法定位现有系统分区_不要再给硬盘胡乱分区了,这里有最方便安全的分区方法。...
- g2(t)用matlab,数字信号处理实验报告
- 固态硬盘计算机怎么自定义分区,如何设置SSD固态硬盘为主硬盘 怎样把SSD分区设置成主分区?...
- Ubuntu20.4环境下,Android11(R)源码,下载,编译,Pixel4刷机
- 【优化求解】基于灰狼算法GWO求解最优目标matlab代码
- 去广告插件——火狐浏览器
- 打开Excel文件,表名为Sheet1$或'TS-X'$
- 淘宝Buy+负责人胡晓航:从技术和产品维度看Buy+ VR购物
- Java基础二维数组
- dp协议学习----1、sst协议学习