CSS布局——960gs

如果看完了还不过瘾?想和作者深聊相关话题,可以点击这里向作者提问!

说起CSS的布局,有太多了,现在常见的有固定布局流体布局弹性布局,有关于这三种常见的布局,在《Fixed vs. Fluid vs. Elastic Layout: What’s The Right One For You?》一文中做出了详细的对比介绍,而且Matthew James Taylor也给我们制作了很多个这方面的实例,大家还可以看看Float-less CSS layout带来的这三个类型的布局效果。随着CSS3Media Queries出现,给我们的布局带来一种全新的体验——适应于多媒价的布局响应

虽然有很多布局的类型,但我们不能把网格布局布局给忘了,常见的网络布局有:Blueprint: A CSS Grid Framework960 CSS Grid SystemTripoli FrameworkYAML – Yet Another Multicolumn LayoutYUI Grid CSS等,而且现在网格上也为这些网格布局提供了很多工具,比如说: Grid Designer 2.6bYUI CSS Grid BuilderYAML BuilderGridnatorVariable Grid System等等。更多的网格系统和在线制作工具,大家还可以点击这里查看更多的资料。

从上面所列出的相关资料,就知道网格布局还是很有占有量的,那么今天我要和大家说的并不是所有网格,我要说的是其中的一种网格布局960gs。我最早接触这个960网格是在wordpress.org,发现这样使用很方便,而且不懂CSS的布局的人员只要他掌握了这个网格布局的法则,他自己就能随时更改需要的布局结构。后来经过一次系统的学习,才发现有很多网站都采用了960网格布局,比如说:Keynote Wireframe ToolkitNick FinckSony Music等。下面我们就一起来看看这个960网格在实际项目中是如何运用的?

960gs使用其实很方便,大家只要到其官网下载整个网格系统的代码,然后应用进行就OK了。听起来很方便,但没有接触的同学还是感觉有点难一样,那么要是你对此很感兴趣,大家就跟我一起看看我是如何使用960gs吧。网络上下载下来的960网络系统,是一个完整的系统,但我个人认为系统中有很多代码是我们没有用到的,完全可以不需要那部分,我们需要的只是其中的格子系,用这些格子系来帮助我们实现各种不同的布局,下面我就给大家介绍一下我取用的部分网格。

首先我将960网格分成两大类,其中一类是“固定尺寸”,而另一大类就是“流体尺寸”,也就是大家所说的自适应布局;接着我在将其中的每大类分成四小类,它们就是:grid12、grid16、grid24和grid32。这四小类的意思就是——我将一个整体布局容器分成了12份(或者说分成了16份或24份或32份)。大家可以先来看看下图所示:

这样一来,我们在960Grids中就有几个概念性的词语,而且这几个词语大家必须了解清楚他们的含义,这将对你使用960gs会有极大的帮助:

  1. 容器名称:这里固定网格我取名叫"container",然后针对每小类取名"container12、container16、container24、container32、";针对自适应网格我取名“containerFluid”,同样针对每个小类“containerFluid12、containerFluid16、containerFluid24和containerFluid32”,当然如果你只是针对其中一种写到你的页面的话,你只需要一个统一的名“container”;
  2. 网格:网格就是你将容器分成的份数,其中每一份就称为网格,我取名为“grid”,并且具有“grid1~grid32”。其中你使用是的“container12”那么他对应的最多网格就是“grid12”,其他的依此类推 ;
  3. 网格宽度(列宽):这个就是每个网格的宽度了,这个就跟具体的列数和列与列之间的间距很有关系的,
  4. 网格间距:这个是指相邻两个网格之间的距离;
  5. 内容宽度:这个宽度是指内容所占的宽度,这里只有两种情况,一种是内宽度为“950px”另一种为“940px”

下面大家一起来看一个“container16”的示意图:

通过上面的名词大家对“960gs”应该有了一定的了解,下面我们来看具体的应用。

HTML Markup

首先,我们使用这个960网格系统,我们也需要一个HTML的结构,下面我们先来看一下其结构:

		<div class="container12 clearfix">
			<div class="grid1">1</div>
			<div class="grid1">1</div>
			<div class="grid1">1</div>
			<div class="grid1">1</div>
			<div class="grid1">1</div>
			<div class="grid1">1</div>
			<div class="grid1">1</div>
			<div class="grid1">1</div>
			<div class="grid1">1</div>
			<div class="grid1">1</div>
			<div class="grid1">1</div>
			<div class="grid1">1</div>
		</div>
	

上面的代码其实很简单,我就在一个大的“div.container12”中放置了12个“div.grid1”;其实这个是很有意义的:其中“div.container12”表示的是我们使用了960网格系统中的12列那种,换句话说,就是把“div.container12”这个容器分成了12份;而其中“div.grid1”就是其中的每一份,我们放置了12个在其中,这样刚好等于容器“div.container12”所分的份数。其实我也也还可以这样使用的:

		<div class="container12 clearfix">
			<div class="grid4">4</div>
			<div class="grid8">8</div>
		</div>
	

这里我们就把“div.container12”同样分成了12份,但我们这个容器中只有两列,其中一列是4个“grid”也就是“div.grid4”,另一列就是8个“grid”,就是“div.grid8”,但他们的总数都是等于容器“div.container12”所分的份数。从上面的两个HTML Markup告诉我们这样一个原理:容器内所有列数之和要等于容器所分的份数

CSS Code

有了结构后,我们需要的就是定义这个网格系统的样式,定义样式之前我们需要知道上面我们所讲的几个参数的值,我先拿“960gs”的“12”列为例:

  1. 容器总宽——container12 = 960px;
  2. 网格数——Number of columns = 12;
  3. 网格宽度——Column width = 60px;
  4. 网格之间的距离——Gutter width=20px;也就是margin-left: 10px;margin-right: 10px
  5. 内容宽度——Content width=940px
  6. 总宽度——Full width=960px,这个总宽度总是等于容器的宽度,换句话总是960px。因为我们这里所讨论就是960gs。

知道这些参数后,我们的样式就可以这样写了:

		/*=========================================================================
		 *Container: width=960px;
		 *Html Markup
		 *     <div class="container12 clearfix">
		 *				<div class="grid4">4</div>
		 *				<div class="grid8">8</div>
		 *     </div>
		 *=========================================================================*/
		.container12 {
			margin-left: auto;
			margin-right: auto;
			width: 960px;
		} 

		/*==========================================================================
		 *container12: 
		 *Column width= 60px 
		 *Number of columns= 12px  
		 *Gutter width= 20px  
		 *Content width=940px  
		 *Full width=960px
		 *=========================================================================*/
		.container12 .grid1,
		.container12 .grid2,
		.container12 .grid3,
		.container12 .grid4,
		.container12 .grid5,
		.container12 .grid6,
		.container12 .grid7,
		.container12 .grid8,
		.container12 .grid9,
		.container12 .grid10,
		.container12 .grid11,
		.container12 .grid12 {
			display:inline;
			float: left;
			position: relative;
			margin-left: 10px;
			margin-right: 10px;
		}

		.container12 .grid1 {
			width:60px;
		}

		.container12 .grid2 {
			width:140px;
		}

		.container12 .grid3 {
			width:220px;
		}

		.container12 .grid4 {
			width:300px;
		}

		.container12 .grid5 {
			width:380px;
		}

		.container12 .grid6 {
			width:460px;
		}

		.container12 .grid7 {
			width:540px;
		}

		.container12 .grid8 {
			width:620px;
		}

		.container12 .grid9 {
			width:700px;
		}

		.container12 .grid10 {
			width:780px;
		}

		.container12 .grid11 {
			width:860px;
		}

		.container12 .grid12 {
			width:940px;
		}
	

到些我们就完成了一个简单的960gs中的12grids布局。上面展示的代码中,我们完全可以把“container12”换成“container”,因为在我们平时制作中,我们可以完全的确定好需要采用的是“container12”还是“container16”或者别的。我在这里只是为了更好的说明问题。前面我也提到过,我们有两大类,各四小类的网格布局,下面我附上他们的代码,和相关的demo给大家参考:

960网格固定布局

先给大家展示的是960网格的四种固定布局:

1、12列布局

		/*=========================================================================
		 *Container: width=960px;
		 *Html Markup
		 *     <div class="container12 clearfix">
		 *				<div class="grid4">4</div>
		 *				<div class="grid8">8</div>
		 *     </div>
		 *=========================================================================*/
		.container12 {
			margin-left: auto;
			margin-right: auto;
			width: 960px;
		} 

		/*==========================================================================
		 *container12: 
		 *Column width= 60px 
		 *Number of columns= 12px  
		 *Gutter width= 20px  
		 *Content width=940px  
		 *Full width=960px
		 *=========================================================================*/
		.container12 .grid1,
		.container12 .grid2,
		.container12 .grid3,
		.container12 .grid4,
		.container12 .grid5,
		.container12 .grid6,
		.container12 .grid7,
		.container12 .grid8,
		.container12 .grid9,
		.container12 .grid10,
		.container12 .grid11,
		.container12 .grid12 {
			display:inline;
			float: left;
			position: relative;
			margin-left: 10px;
			margin-right: 10px;
		}

		.container12 .grid1 {
			width:60px;
		}

		.container12 .grid2 {
			width:140px;
		}

		.container12 .grid3 {
			width:220px;
		}

		.container12 .grid4 {
			width:300px;
		}

		.container12 .grid5 {
			width:380px;
		}

		.container12 .grid6 {
			width:460px;
		}

		.container12 .grid7 {
			width:540px;
		}

		.container12 .grid8 {
			width:620px;
		}

		.container12 .grid9 {
			width:700px;
		}

		.container12 .grid10 {
			width:780px;
		}

		.container12 .grid11 {
			width:860px;
		}

		.container12 .grid12 {
			width:940px;
		}
	

请看对应的DEMO效果:

2、16列布局

		/*=========================================================================
		 *Container: width=960px;
		 *Html Markup
		 *     <div class="container16 clearfix">
		 *				<div class="grid8">8</div>
		 *				<div class="grid8">8</div>
		 *     </div>
		 *=========================================================================*/
		.container16 {
			margin-left: auto;
			margin-right: auto;
			width: 960px;
		}
		/*==========================================================================
		 *container16: 
		 *Column width= 40px 
		 *Number of columns= 16px  
		 *Gutter width= 20px  
		 *Content width=940px  
		 *Full width=960px
		 *=========================================================================*/
		.container16 .grid1,
		.container16 .grid2,
		.container16 .grid3,
		.container16 .grid4,
		.container16 .grid5,
		.container16 .grid6,
		.container16 .grid7,
		.container16 .grid8,
		.container16 .grid9,
		.container16 .grid10,
		.container16 .grid11,
		.container16 .grid12,
		.container16 .grid-one-third,
		.container16 .grid-two-thirds,
		.container16 .grid13,
		.container16 .grid14,
		.container16 .grid15,
		.container16 .grid16 {
			display:inline;
			float: left;
			position: relative;
			margin-left: 10px;
			margin-right: 10px;
		} 
		.container16 .grid1 {
			width:40px;
		}

		.container16 .grid2 {
			width:100px;
		}

		.container16 .grid3 {
			width:160px;
		}

		.container16 .grid4 {
			width:220px;
		}

		.container16 .grid5 {
			width:280px;
		}

		.container16 .grid-one-third {
			width: 300px;
		}

		.container16 .grid6 {
			width:340px;
		}

		.container16 .grid7 {
			width:400px;
		}

		.container16 .grid8 {
			width:460px;
		}

		.container16 .grid9 {
			width:520px;
		}

		.container16 .grid10 {
			width:580px;
		}

		.container16 .grid-two-thirds {
			width: 620px;
		}

		.container16 .grid11 {
			width:640px;
		}

		.container16 .grid12 {
			width:700px;
		}

		.container16 .grid13 {
			width:760px;
		}

		.container16 .grid14 {
			width:820px;
		}

		.container16 .grid15 {
			width:880px;
		}

		.container16 .grid16 {
			width:940px;
		}
	

DEMO

3、24列布局

		/*=========================================================================
		 *Container: width=960px;
		 *Html Markup
		 *     <div class="container24 clearfix">
		 *				<div class="grid16">8</div>
		 *				<div class="grid8">8</div>
		 *     </div>
		 *=========================================================================*/
		.container24 {
			margin-left: auto;
			margin-right: auto;
			width: 960px;
		}
		/*==========================================================================
		 *container24: 
		 *Column width= 30px 
		 *Number of columns= 24px  
		 *Gutter width= 10px  
		 *Content width=950px  
		 *Full width=960px
		 *=========================================================================*/
		.container24 .grid1,
		.container24 .grid2,
		.container24 .grid3,
		.container24 .grid4,
		.container24 .grid5,
		.container24 .grid6,
		.container24 .grid7,
		.container24 .grid8,
		.container24 .grid9,
		.container24 .grid10,
		.container24 .grid11,
		.container24 .grid12,
		.container24 .grid13,
		.container24 .grid14,
		.container24 .grid15,
		.container24 .grid16,
		.container24 .grid17,
		.container24 .grid18,
		.container24 .grid19,
		.container24 .grid20,
		.container24 .grid21,
		.container24 .grid22,
		.container24 .grid23,
		.container24 .grid24 {
			display:inline;
			float: left;
			position: relative;
			margin-left: 5px;
			margin-right: 5px;
		}

		.container24 .grid1 {
			width:30px;
		}

		.container24 .grid2 {
			width:70px;
		}

		.container24 .grid3 {
			width:110px;
		}

		.container24 .grid4 {
			width:150px;
		}

		.container24 .grid5 {
			width:190px;
		}

		.container24 .grid6 {
			width:230px;
		}

		.container24 .grid7 {
			width:270px;
		}

		.container24 .grid8 {
			width:310px;
		}

		.container24 .grid9 {
			width:350px;
		}

		.container24 .grid10 {
			width:390px;
		}

		.container24 .grid11 {
			width:430px;
		}

		.container24 .grid12 {
			width:470px;
		}

		.container24 .grid13 {
			width:510px;
		}

		.container24 .grid14 {
			width:550px;
		}

		.container24 .grid15 {
			width:590px;
		}

		.container24 .grid16 {
			width:630px;
		}

		.container24 .grid17 {
			width:670px;
		}

		.container24 .grid18 {
			width:710px;
		}

		.container24 .grid19 {
			width:750px;
		}

		.container24 .grid20 {
			width:790px;
		}

		.container24 .grid21 {
			width:830px;
		}

		.container24 .grid22 {
			width:870px;
		}

		.container24 .grid23 {
			width:910px;
		}

		.container24 .grid24 {
			width:950px;
		}
		
	

DEMO:

3、32列定位

		/*=========================================================================
		 *Container: width=960px;
		 *Html Markup
		 *     <div class="container32 clearfix">
		 *				<div class="grid16">8</div>
		 *				<div class="grid16">8</div>
		 *     </div>
		 *=========================================================================*/
		.container32 {
			margin-left: auto;
			margin-right: auto;
			width: 960px;
		}
		
		/*==========================================================================
		 *container32: 
		 *Column width= 20px 
		 *Number of columns= 32px  
		 *Gutter width= 10px  
		 *Content width=950px  
		 *Full width=960px
		 *=========================================================================*/
		.container32 .grid1,
		.container32 .grid2,
		.container32 .grid3,
		.container32 .grid4,
		.container32 .grid5,
		.container32 .grid6,
		.container32 .grid7,
		.container32 .grid8,
		.container32 .grid9,
		.container32 .grid10,
		.container32 .grid11,
		.container32 .grid12,
		.container32 .grid13,
		.container32 .grid14,
		.container32 .grid15,
		.container32 .grid16,
		.container32 .grid17,
		.container32 .grid18,
		.container32 .grid19,
		.container32 .grid20,
		.container32 .grid21,
		.container32 .grid22,
		.container32 .grid23,
		.container32 .grid24,
		.container32 .grid25,
		.container32 .grid26,
		.container32 .grid27,
		.container32 .grid28,
		.container32 .grid29,
		.container32 .grid30,
		.container32 .grid31,
		.container32 .grid32,
		.container32 .grid-one-third,
		.container32 .grid-two-thirds {
			display:inline;
			float: left;
			position: relative;
			margin-left: 5px;
			margin-right: 5px;
		}
		.container32 .grid1 {
			width:20px;
		}

		.container32 .grid2 {
			width:50px;
		}

		.container32 .grid3 {
			width:80px;
		}

		.container32 .grid4 {
			width:110px;
		}

		.container32 .grid5 {
			width:140px;
		}

		.container32 .grid6 {
			width:170px;
		}

		.container32 .grid7 {
			width:200px;
		}

		.container32 .grid8 {
			width:230px;
		}

		.container32 .grid9 {
			width:260px;
		}

		.container32 .grid10 {
			width:290px;
		}

		.container32 .grid-one-third {
			width: 310px;
		}

		.container32 .grid-two-thirds {
			width: 630px;
		}
		.container32 .grid11 {
			width:320px;
		}

		.container32 .grid12 {
			width:350px;
		}

		.container32 .grid13 {
			width:380px;
		}

		.container32 .grid14 {
			width:410px;
		}

		.container32 .grid15 {
			width:440px;
		}

		.container32 .grid16 {
			width:470px;
		}

		.container32 .grid17 {
			width:500px;
		}

		.container32 .grid18 {
			width:530px;
		}

		.container32 .grid19 {
			width:560px;
		}

		.container32 .grid20 {
			width:590px;
		}

		.container32 .grid21 {
			width:620px;
		}

		.container32 .grid22 {
			width:650px;
		}

		.container32 .grid23 {
			width:680px;
		}

		.container32 .grid24 {
			width:710px;
		}

		.container32 .grid25 {
			width:740px;
		}

		.container32 .grid26 {
			width:770px;
		}

		.container32 .grid27 {
			width:800px;
		}

		.container32 .grid28 {
			width:830px;
		}

		.container32 .grid29 {
			width:860px;
		}

		.container32 .grid30 {
			width:890px;
		}

		.container32 .grid31 {
			width:920px;
		}

		.container32 .grid32 {
			width:950px;
		}
		
	

DEMO

上面展示了四种固定布局的效果,最后提醒大家一下,每个实例都需要加上清除浮动的代码:

		/*===============================================================================
		 * clear and clearfix => clear:both
		 * clearLeft => clear:left
		 * clearRiht => clear:rigth
		 *===============================================================================*/
		.clearfix:before, 
		.clearfix:after { 
		  content: ""; 
		  display: table; 
		}
		.clearfix:after { 
		  clear: both; 
		  overflow:hidden;
		}
		.clearfix { 
		  zoom: 1; 
		}		
	

960网格自适应布局

前面展示了四种960网格的固定布局,接下来我们一起来看看另外四种自适应的布局效果,在盾自适应布局之前,有一点先需要提醒大家,最好在你的body中加上

		body {min-width: 960px}
	

具体加上他的好处,大家不用我说都知道的,下面我们来看代码吧:

		/*===========================================================================================
		 *	Variable Grid System (Fluid Version).
		 *	Learn more ~ http://www.spry-soft.com/grids/
		 *	Based on 960 Grid System - http://960.gs/ & 960 Fluid - http://www.designinfluences.com/
		 *	Licensed under GPL and MIT.
		 *==========================================================================================*/

		 /*=========================================================================
		  *Container: width=960px;
		  *Html Markup
		  *     <div class="containerFluid12 clearfix">
		  *				<div class="grid4">4</div>
		  *				<div class="grid8">8</div>
		  *     </div>
		  *=========================================================================*/ 
		  body {
		    min-width: 960px;
		  }

		  .containerFluid12,
		  .containerFluid16,
		  .containerFluid24,
		  .containerFluid32 {
		  	width: 92%;
		  	margin-left: 4%;
		  	margin-right: 4%;
		  }  
		/*==========================================================================
		 *container12: 
		 *Column width= 60px 
		 *Number of columns= 12px  
		 *Gutter width= 20px  
		 *Content width=940px  
		 *Full width=960px
		 *=========================================================================*/
		.containerFluid12 .grid1,
		.containerFluid12 .grid2,
		.containerFluid12 .grid3,
		.containerFluid12 .grid4,
		.containerFluid12 .grid5,
		.containerFluid12 .grid6,
		.containerFluid12 .grid7,
		.containerFluid12 .grid8,
		.containerFluid12 .grid9,
		.containerFluid12 .grid10,
		.containerFluid12 .grid11,
		.containerFluid12 .grid12 {
		 	display:inline;
		 	float: left;
		 	position: relative;
		 	margin-left: 1%;
		 	margin-right: 1%;
		 	margin-left: 0.92%\9;
		 	margin-right: 0.92%\9;
		 	_margin-left: 0.8%;
		 	_margin-right: 0.8%;
		} 

		.containerFluid12 .grid1 {
			width:6.333%;
		}

		.containerFluid12 .grid2 {
			width:14.667%;
		}

		.containerFluid12 .grid3 {
			width:23.0%;
		}

		.containerFluid12 .grid4 {
			width:31.333%;
		}

		.containerFluid12 .grid5 {
			width:39.667%;
		}

		.containerFluid12 .grid6 {
			width:48.0%;
		}

		.containerFluid12 .grid7 {
			width:56.333%;
		}

		.containerFluid12 .grid8 {
			width:64.667%;
		}

		.containerFluid12 .grid9 {
			width:73.0%;
		}

		.containerFluid12 .grid10 {
			width:81.333%;
		}

		.containerFluid12 .grid11 {
			width:89.667%;
		}

		.containerFluid12 .grid12 {
			width:98.0%;
		} 
		/*==========================================================================
		 *container16: 
		 *Column width= 40px 
		 *Number of columns= 16px  
		 *Gutter width= 20px  
		 *Content width=940px  
		 *Full width=960px
		 *=========================================================================*/
		.containerFluid16 .grid1,
		.containerFluid16 .grid2,
		.containerFluid16 .grid3,
		.containerFluid16 .grid4,
		.containerFluid16 .grid5,
		.containerFluid16 .grid6,
		.containerFluid16 .grid7,
		.containerFluid16 .grid8,
		.containerFluid16 .grid9,
		.containerFluid16 .grid10,
		.containerFluid16 .grid11,
		.containerFluid16 .grid12,
		.containerFluid16 .grid13,
		.containerFluid16 .grid14,
		.containerFluid16 .grid15,
		.containerFluid16 .grid16,
		.containerFluid16 .grid-one-third,
		.containerFluid16 .grid-two-thirds {
		 	display:inline;
		 	float: left;
		 	position: relative;
		 	margin-left: 1%;
		 	margin-right: 1%;
		 	margin-left: 0.92%\9;
		 	margin-right: 0.92%\9;
		 	_margin-left: 0.8%;
		 	_margin-right: 0.8%;
		 } 
		.containerFluid16 .grid1 {
			width:4.25%;
		}

		.containerFluid16 .grid2 {
			width:10.5%;
		}

		.containerFluid16 .grid3 {
			width:16.75%;
		}

		.containerFluid16 .grid4 {
			width:23.0%;
		}

		.containerFluid16 .grid-one-third {
		  width: 31.333%;  
		}
		.containerFluid16 .grid-two-thirds {
		  width: 64.667%;
		}

		.containerFluid16 .grid5 {
			width:29.25%;
		}

		.containerFluid16 .grid6 {
			width:35.5%;
		}

		.containerFluid16 .grid7 {
			width:41.75%;
		}

		.containerFluid16 .grid8 {
			width:48.0%;
		}

		.containerFluid16 .grid9 {
			width:54.25%;
		}

		.containerFluid16 .grid10 {
			width:60.5%;
		}

		.containerFluid16 .grid11 {
			width:66.75%;
		}

		.containerFluid16 .grid12 {
			width:73.0%;
		}

		.containerFluid16 .grid13 {
			width:79.25%;
		}

		.containerFluid16 .grid14 {
			width:85.5%;
		}

		.containerFluid16 .grid15 {
			width:91.75%;
		}

		.containerFluid16 .grid16 {
			width:98.0%;
		}

		/*==========================================================================
		 *container24: 
		 *Column width= 30px 
		 *Number of columns= 24px  
		 *Gutter width= 10px  
		 *Content width=950px  
		 *Full width=960px
		 *=========================================================================*/
		.containerFluid24 .grid1,
		.containerFluid24 .grid2,
		.containerFluid24 .grid3,
		.containerFluid24 .grid4,
		.containerFluid24 .grid5,
		.containerFluid24 .grid6,
		.containerFluid24 .grid7,
		.containerFluid24 .grid8,
		.containerFluid24 .grid9,
		.containerFluid24 .grid10,
		.containerFluid24 .grid11,
		.containerFluid24 .grid12,
		.containerFluid24 .grid13,
		.containerFluid24 .grid14,
		.containerFluid24 .grid15,
		.containerFluid24 .grid16,
		.containerFluid24 .grid17,
		.containerFluid24 .grid18,
		.containerFluid24 .grid19,
		.containerFluid24 .grid20,
		.containerFluid24 .grid21,
		.containerFluid24 .grid22,
		.containerFluid24 .grid23,
		.containerFluid24 .grid24 {
		 	display:inline;
		 	float: left;
		 	position: relative;
		 	margin-left: 1%;
		 	margin-right: 1%;
		 	margin-left: 0.92%\9;
		 	margin-right: 0.92%\9;
		 	_margin-left: 0.8%;
		 	_margin-right: 0.8%;
		 } 
		.containerFluid24 .grid1 {
			width:2.167%;
		}

		.containerFluid24 .grid2 {
			width:6.333%;
		}

		.containerFluid24 .grid3 {
			width:10.5%;
		}

		.containerFluid24 .grid4 {
			width:14.667%;
		}

		.containerFluid24 .grid5 {
			width:18.833%;
		}

		.containerFluid24 .grid6 {
			width:23.0%;
		}

		.containerFluid24 .grid7 {
			width:27.167%;
		}

		.containerFluid24 .grid8 {
			width:31.333%;
		}

		.containerFluid24 .grid9 {
			width:35.5%;
		}

		.containerFluid24 .grid10 {
			width:39.667%;
		}

		.containerFluid24 .grid11 {
			width:43.833%;
		}

		.containerFluid24 .grid12 {
			width:48.0%;
		}

		.containerFluid24 .grid13 {
			width:52.167%;
		}

		.containerFluid24 .grid14 {
			width:56.333%;
		}

		.containerFluid24 .grid15 {
			width:60.5%;
		}

		.containerFluid24 .grid16 {
			width:64.667%;
		}

		.containerFluid24 .grid17 {
			width:68.833%;
		}

		.containerFluid24 .grid18 {
			width:73.0%;
		}

		.containerFluid24 .grid19 {
			width:77.167%;
		}

		.containerFluid24 .grid20 {
			width:81.333%;
		}

		.containerFluid24 .grid21 {
			width:85.5%;
		}

		.containerFluid24 .grid22 {
			width:89.667%;
		}

		.containerFluid24 .grid23 {
			width:93.833%;
		}

		.containerFluid24 .grid24 {
			width:98.0%;
		}
		/*==========================================================================
		 *container32: 
		 *Column width= 20px 
		 *Number of columns= 32px  
		 *Gutter width= 10px  
		 *Content width=950px  
		 *Full width=960px
		 *=========================================================================*/
		.containerFluid32 .grid1,
		.containerFluid32 .grid2,
		.containerFluid32 .grid3,
		.containerFluid32 .grid4,
		.containerFluid32 .grid5,
		.containerFluid32 .grid6,
		.containerFluid32 .grid7,
		.containerFluid32 .grid8,
		.containerFluid32 .grid9,
		.containerFluid32 .grid10,
		.containerFluid32 .grid11,
		.containerFluid32 .grid12,
		.containerFluid32 .grid13,
		.containerFluid32 .grid14,
		.containerFluid32 .grid15,
		.containerFluid32 .grid16,
		.containerFluid32 .grid17,
		.containerFluid32 .grid18,
		.containerFluid32 .grid19,
		.containerFluid32 .grid20,
		.containerFluid32 .grid21,
		.containerFluid32 .grid22,
		.containerFluid32 .grid23,
		.containerFluid32 .grid24,
		.containerFluid32 .grid25,
		.containerFluid32 .grid26,
		.containerFluid32 .grid27,
		.containerFluid32 .grid28,
		.containerFluid32 .grid29,
		.containerFluid32 .grid30,
		.containerFluid32 .grid31,
		.containerFluid32 .grid32,
		.containerFluid32 .grid-one-third,
		.containerFluid32 .grid-two-thirds {
		 	display:inline;
		 	float: left;
		 	position: relative;
		 	margin-left: 1%;
		 	margin-right: 1%;
		 	margin-left: 0.92%\9;
		 	margin-right: 0.92%\9;
		 	_margin-left: 0.8%;
		 	_margin-right: 0.8%;
		 } 
		.containerFluid32 .grid1 {
			width:1.125%;
		}

		.containerFluid32 .grid2 {
			width:4.25%;
		}

		.containerFluid32 .grid3 {
			width:7.375%;
		}

		.containerFluid32 .grid4 {
			width:10.5%;
		}

		.containerFluid32 .grid5 {
			width:13.625%;
		}

		.containerFluid32 .grid6 {
			width:16.75%;
		}

		.containerFluid32 .grid7 {
			width:19.875%;
		}

		.containerFluid32 .grid8 {
			width:23.0%;
		}

		.containerFluid32 .grid9 {
			width:26.125%;
		}

		.containerFluid32 .grid10 {
			width:29.25%;
		}

		.containerFluid32 .grid11 {
			width:32.375%;
		}

		.containerFluid32 .grid12 {
			width:35.5%;
		}

		.containerFluid32 .grid-one-third {
		  width: 31.333%;
		}
		.containerFluid32 .grid-two-thirds {
		  width: 64.667%;
		}
		.containerFluid32 .grid13 {
			width:38.625%;
		}

		.containerFluid32 .grid14 {
			width:41.75%;
		}

		.containerFluid32 .grid15 {
			width:44.875%;
		}

		.containerFluid32 .grid16 {
			width:48.0%;
		}

		.containerFluid32 .grid17 {
			width:51.125%;
		}

		.containerFluid32 .grid18 {
			width:54.25%;
		}

		.containerFluid32 .grid19 {
			width:57.375%;
		}

		.containerFluid32 .grid20 {
			width:60.5%;
		}

		.containerFluid32 .grid21 {
			width:63.625%;
		}

		.containerFluid32 .grid22 {
			width:66.75%;
		}

		.containerFluid32 .grid23 {
			width:69.875%;
		}

		.containerFluid32 .grid24 {
			width:73.0%;
		}

		.containerFluid32 .grid25 {
			width:76.125%;
		}

		.containerFluid32 .grid26 {
			width:79.25%;
		}

		.containerFluid32 .grid27 {
			width:82.375%;
		}

		.containerFluid32 .grid28 {
			width:85.5%;
		}

		.containerFluid32 .grid29 {
			width:88.625%;
		}

		.containerFluid32 .grid30 {
			width:91.75%;
		}

		.containerFluid32 .grid31 {
			width:94.875%;
		}

		.containerFluid32 .grid32 {
			width:98.0%;
		}
	

具体效果请查看DEMO效果。

那么到止为止我们总共见证了八种网格布局,不知道大家理解清楚没有,要是没有的话不怕,我们可以借助这个工具来帮大家实现:

当然,这只是960gs,如果大家需要1140px呢?720px呢?其实只要你明白上面的原理,借助这样的工具,你将能制作出你自己想要的网格布局。心动了吗?要是心动了就动手试试吧。希望大家喜欢这个网格系统,如果有更好的建议,欢迎给我留言,与大家共享。

如需要转载烦请注明出处:W3CPLUS

如需转载,烦请注明出处:https://www.w3cplus.com/css/css-layout-with-960-grids

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部