960 Grid System

Aus Wikizone
Version vom 25. März 2011, 12:59 Uhr von 178.7.131.226 (Diskussion)
(Unterschied) ← Nächstältere Version | Aktuelle Version (Unterschied) | Nächstjüngere Version → (Unterschied)
Wechseln zu: Navigation, Suche

Links[Bearbeiten]

http://960.gs/demo.html

To the right is an example of how the code works. The container specifies how many total columns exist, either 12 or 16. For the most part, you will only ever need to specify a class name of grid_XX, where XX represents the column width.

If a grid unit contains grid children, the first child in a row will need a class of alpha and the last child in a row requires the class name omega. Likewise, if you want to insert empty space before or after a grid unit, use class prefix_XX or suffix_XX.


Demopage 

<body>
<h1>
	<a href="http://960.gs/">960 Grid System</a>
</h1>
<div class="container_12">
	<h2>
		12 Column Grid
	</h2>
	<div class="grid_12">
		<p>
			940
		</p>
	</div>
	<!-- end .grid_12 -->
	<div class="clear"></div>
	<div class="grid_1">
		<p>
			60
		</p>
	</div>
	<!-- end .grid_1 -->
	<div class="grid_11">
		<p>
			860
		</p>
	</div>
	<!-- end .grid_11 -->
	<div class="clear"></div>
	<div class="grid_2">
		<p>
			140
		</p>
	</div>
	<!-- end .grid_2 -->
	<div class="grid_10">
		<p>
			780
		</p>
	</div>
	<!-- end .grid_10 -->
	<div class="clear"></div>
	<div class="grid_3">
		<p>
			220
		</p>
	</div>
	<!-- end .grid_3 -->
	<div class="grid_9">
		<p>
			700
		</p>
	</div>
	<!-- end .grid_9 -->
	<div class="clear"></div>
	<div class="grid_4">
		<p>
			300
		</p>
	</div>
	<!-- end .grid_4 -->
	<div class="grid_8">
		<p>
			620
		</p>
	</div>
	<!-- end .grid_8 -->
	<div class="clear"></div>
	<div class="grid_5">
		<p>
			380
		</p>
	</div>
	<!-- end .grid_5 -->
	<div class="grid_7">
		<p>
			540
		</p>
	</div>
	<!-- end .grid_7 -->
	<div class="clear"></div>
	<div class="grid_6">
		<p>
			460
		</p>
	</div>
	<!-- end .grid_6 -->
	<div class="grid_6">
		<p>
			460
		</p>
	</div>
	<!-- end .grid_6 -->
	<div class="clear"></div>
	<div class="grid_1 suffix_11">
		<p>
			60
		</p>
	</div>
	<!-- end .grid_1.suffix_11 -->
	<div class="clear"></div>
	<div class="grid_1 prefix_1 suffix_10">
		<p>
			60
		</p>
	</div>
	<!-- end .grid_1.prefix_1.suffix_10 -->
	<div class="clear"></div>
	<div class="grid_1 prefix_2 suffix_9">
		<p>
			60
		</p>
	</div>
	<!-- end .grid_1.prefix_2.suffix_9 -->
	<div class="clear"></div>
	<div class="grid_1 prefix_3 suffix_8">
		<p>
			60
		</p>
	</div>
	<!-- end .grid_1.prefix_3.suffix_8 -->
	<div class="clear"></div>
	<div class="grid_1 prefix_4 suffix_7">
		<p>
			60
		</p>
	</div>
	<!-- end .grid_1.prefix_4.suffix_7 -->
	<div class="clear"></div>
	<div class="grid_1 prefix_5 suffix_6">
		<p>
			60
		</p>
	</div>
	<!-- end .grid_1.prefix_5.suffix_6 -->
	<div class="clear"></div>
	<div class="grid_1 prefix_6 suffix_5">
		<p>
			60
		</p>
	</div>
	<!-- end .grid_1.prefix_6.suffix_5 -->
	<div class="clear"></div>
	<div class="grid_1 prefix_7 suffix_4">
		<p>
			60
		</p>
	</div>
	<!-- end .grid_1.prefix_7.suffix_4 -->
	<div class="clear"></div>
	<div class="grid_1 prefix_8 suffix_3">
		<p>
			60
		</p>
	</div>
	<!-- end .grid_1.prefix_8.suffix_3 -->
	<div class="clear"></div>
	<div class="grid_1 prefix_9 suffix_2">
		<p>
			60
		</p>
	</div>
	<!-- end .grid_1.prefix_9.suffix_2 -->
	<div class="clear"></div>
	<div class="grid_1 prefix_10 suffix_1">
		<p>
			60
		</p>
	</div>
	<!-- end .grid_1.prefix_10.suffix_1 -->
	<div class="clear"></div>
	<div class="grid_1 prefix_11">
		<p>
			60
		</p>
	</div>
	<!-- end .grid_1.prefix_11 -->
	<div class="clear"></div>
	<div class="grid_6 push_6">
		<div class="grid_1 alpha">
			<p>
				60
			</p>
		</div>
		<!-- end .grid_1.alpha -->
		<div class="grid_5 omega">
			<p>
				380
			</p>
		</div>
		<!-- end .grid_5.omega -->
		<div class="clear"></div>
		<div class="grid_3 alpha">
			<p>
				220
			</p>
		</div>
		<!-- end .grid_3.alpha -->
		<div class="grid_3 omega">
			<p>
				220
			</p>
		</div>
		<!-- end .grid_3.omega -->
		<div class="clear"></div>
	</div>
	<!-- end .grid_6.push_6 -->
	<div class="grid_6 pull_6">
		<div class="grid_3 alpha">
			<p>
				220
			</p>
		</div>
		<!-- end .grid_3.alpha -->
		<div class="grid_3 omega">
			<p>
				220
			</p>
		</div>
		<!-- end .grid_3.omega -->
		<div class="clear"></div>
		<div class="grid_1 alpha">
			<p>
				60
			</p>
		</div>
		<!-- end .grid_1.alpha -->
		<div class="grid_5 omega">
			<p>
				380
			</p>
		</div>
		<!-- end .grid_5.omega -->
		<div class="clear"></div>
	</div>
	<!-- end .grid_6.pull_6 -->
	<div class="clear"></div>
</div>
<!-- end .container_12 -->
<div class="container_16">
	<h2>
		16 Column Grid
	</h2>
	<div class="grid_16">
		<p>
			940
		</p>
	</div>
	<!-- end .grid_16 -->
	<div class="clear"></div>
	<div class="grid_1">
		<p>
			40
		</p>
	</div>
	<!-- end .grid_1 -->
	<div class="grid_15">
		<p>
			880
		</p>
	</div>
	<!-- end .grid_15 -->
	<div class="clear"></div>
	<div class="grid_2">
		<p>
			100
		</p>
	</div>
	<!-- end .grid_2 -->
	<div class="grid_14">
		<p>
			820
		</p>
	</div>
	<!-- end .grid_14 -->
	<div class="clear"></div>
	<div class="grid_3">
		<p>
			160
		</p>
	</div>
	<!-- end .grid_3 -->
	<div class="grid_13">
		<p>
			760
		</p>
	</div>
	<!-- end .grid_13 -->
	<div class="clear"></div>
	<div class="grid_4">
		<p>
			220
		</p>
	</div>
	<!-- end .grid_4 -->
	<div class="grid_12">
		<p>
			700
		</p>
	</div>
	<!-- end .grid_12 -->
	<div class="clear"></div>
	<div class="grid_5">
		<p>
			280
		</p>
	</div>
	<!-- end .grid_5 -->
	<div class="grid_11">
		<p>
			640
		</p>
	</div>
	<!-- end .grid_11 -->
	<div class="clear"></div>
	<div class="grid_6">
		<p>
			340
		</p>
	</div>
	<!-- end .grid_6 -->
	<div class="grid_10">
		<p>
			580
		</p>
	</div>
	<!-- end .grid_10 -->
	<div class="clear"></div>
	<div class="grid_7">
		<p>
			400
		</p>
	</div>
	<!-- end .grid_7 -->
	<div class="grid_9">
		<p>
			520
		</p>
	</div>
	<!-- end .grid_9 -->
	<div class="clear"></div>
	<div class="grid_8">
		<p>
			460
		</p>
	</div>
	<!-- end .grid_8 -->
	<div class="grid_8">
		<p>
			460
		</p>
	</div>
	<!-- end .grid_8 -->
	<div class="clear"></div>
	<div class="grid_1 suffix_15">
		<p>
			40
		</p>
	</div>
	<!-- end .grid_1.suffix_15 -->
	<div class="clear"></div>
	<div class="grid_1 prefix_1 suffix_14">
		<p>
			40
		</p>
	</div>
	<!-- end .grid_1.prefix_1.suffix_14 -->
	<div class="clear"></div>
	<div class="grid_1 prefix_2 suffix_13">
		<p>
			40
		</p>
	</div>
	<!-- end .grid_1.prefix_2.suffix_13 -->
	<div class="clear"></div>
	<div class="grid_1 prefix_3 suffix_12">
		<p>
			40
		</p>
	</div>
	<!-- end .grid_1.prefix_3.suffix_12 -->
	<div class="clear"></div>
	<div class="grid_1 prefix_4 suffix_11">
		<p>
			40
		</p>
	</div>
	<!-- end .grid_1.prefix_4.suffix_11 -->
	<div class="clear"></div>
	<div class="grid_1 prefix_5 suffix_10">
		<p>
			40
		</p>
	</div>
	<!-- end .grid_1.prefix_5.suffix_10 -->
	<div class="clear"></div>
	<div class="grid_1 prefix_6 suffix_9">
		<p>
			40
		</p>
	</div>
	<!-- end .grid_1.prefix_6.suffix_9 -->
	<div class="clear"></div>
	<div class="grid_1 prefix_7 suffix_8">
		<p>
			40
		</p>
	</div>
	<!-- end .grid_1.prefix_7.suffix_8 -->
	<div class="clear"></div>
	<div class="grid_1 prefix_8 suffix_7">
		<p>
			40
		</p>
	</div>
	<!-- end .grid_1.prefix_8.suffix_7 -->
	<div class="clear"></div>
	<div class="grid_1 prefix_9 suffix_6">
		<p>
			40
		</p>
	</div>
	<!-- end .grid_1.prefix_9.suffix_6 -->
	<div class="clear"></div>
	<div class="grid_1 prefix_10 suffix_5">
		<p>
			40
		</p>
	</div>
	<!-- end .grid_1.prefix_10.suffix_5 -->
	<div class="clear"></div>
	<div class="grid_1 prefix_11 suffix_4">
		<p>
			40
		</p>
	</div>
	<!-- end .grid_1.prefix_11.suffix_4 -->
	<div class="clear"></div>
	<div class="grid_1 prefix_12 suffix_3">
		<p>
			40
		</p>
	</div>
	<!-- end .grid_1.prefix_12.suffix_3 -->
	<div class="clear"></div>
	<div class="grid_1 prefix_13 suffix_2">
		<p>
			40
		</p>
	</div>
	<!-- end .grid_1.prefix_13.suffix_2 -->
	<div class="clear"></div>
	<div class="grid_1 prefix_14 suffix_1">
		<p>
			40
		</p>
	</div>
	<!-- end .grid_1.prefix_14.suffix_1 -->
	<div class="clear"></div>
	<div class="grid_1 prefix_15">
		<p>
			40
		</p>
	</div>
	<!-- end .grid_1.prefix_15 -->
	<div class="clear"></div>
	<div class="grid_8 push_8">
		<div class="grid_1 alpha">
			<p>
				40
			</p>
		</div>
		<!-- end .grid_1.alpha -->
		<div class="grid_7 omega">
			<p>
				400
			</p>
		</div>
		<!-- end .grid_7.omega -->
		<div class="clear"></div>
		<div class="grid_4 alpha">
			<p>
				220
			</p>
		</div>
		<!-- end .grid_4.alpha -->
		<div class="grid_4 omega">
			<p>
				220
			</p>
		</div>
		<!-- end .grid_4.omega -->
		<div class="clear"></div>
	</div>
	<!-- end .grid_8.push_8 -->
	<div class="grid_8 pull_8">
		<div class="grid_4 alpha">
			<p>
				220
			</p>
		</div>
		<!-- end .grid_4.alpha -->
		<div class="grid_4 omega">
			<p>
				220
			</p>
		</div>
		<!-- end .grid_4.omega -->
		<div class="clear"></div>
		<div class="grid_1 alpha">
			<p>
				40
			</p>
		</div>
		<!-- end .grid_1.alpha -->
		<div class="grid_7 omega">
			<p>
				400
			</p>
		</div>
		<!-- end .grid_7.omega -->
		<div class="clear"></div>
	</div>
	<!-- end .grid_8.pull_8 -->
	<div class="clear"></div>
</div>
<!-- end .container_16 -->
</body>
Abgerufen von „https://wiki.stephanschlegel.de/index.php?title=960_Grid_System&oldid=18730“