使用Grid网格布局的几种页面布局

项目居中布局

实现效果,不管页面大小,项目总是位于页面的中间


		
			
"ex-container">
"parent blue">
"box coral" contenteditable> :)

使用Grid网格布局的几种页面布局_第1张图片

2.并列布局

并列布局,就是多个项目并列,如果宽度不够的话,项目会往下排


	
"container">
"parent">
"box">1
"box">2
"box">3

使用Grid网格布局的几种页面布局_第2张图片
使用Grid网格布局的几种页面布局_第3张图片
使用Grid网格布局的几种页面布局_第4张图片

3.两栏布局

两栏布局,一个边栏,一个主栏,边栏宽度不变,主栏宽度会随着页面宽度而改变

使用Grid网格布局的几种页面布局_第5张图片


	
"container">
"parent">
"section yellow"> 边栏
"section purple"> 主栏

4.三明治布局

即将页面分为页头,主体,尾部
使用Grid网格布局的几种页面布局_第6张图片


	
	
"container">
"parent">
"section blue">Header
"section coral">Main
"section purple">Footer

5.圣杯布局

和三明治布局类似,不过主体部分又区分了三栏

使用Grid网格布局的几种页面布局_第7张图片
如下图,将容器分成9个单元格,头和尾部占据了3个单元格,主体的三栏每一栏占据一个单元格
使用Grid网格布局的几种页面布局_第8张图片


	
"container">
"parent">
"section pink">Header
"section left-side blue">left sideBar
"section coral">main content
"right-side yellow section">right sidebar
"green section">footer

6. 12跨越网格

12网格布局,如下图,将网格分为12列,每个项目跨越不同的网格,第一个项目跨越12列,

使用Grid网格布局的几种页面布局_第9张图片


	
"container">
"parent">
"section span12">span12
"section span6">span6
"section span4">span4
"section span2">span2

7.设置间距

项目之间设置间距

使用Grid网格布局的几种页面布局_第10张图片


	
"container">
"parent">
"box box1">1
"box box2">2
"box box3">3
"box box4">4

你可能感兴趣的:(css)