<commit_before><? $page_title = "The Grid" ?>
<?php include("includes/_documentation_head.php"); ?>
	
	<div class="container">
		<div class="row">
			<div class="twelve columns">
				<div class="foundation-header">
					<h1><a href="index.php">Foundation Docs</a></h1>
					<h4 class="subheader">Rapid prototyping and building library from ZURB.</h4>
				</div>
			
				<dl class="nice tabs mobile hide-on-phones">
					<dd><a href="index.php">Getting Started</a></dd>
					<dd><a href="grid.php" class="active">Grid</a></dd>
					<dd><a href="buttons.php">Buttons</a></dd>
					<dd><a href="forms.php">Forms</a></dd>
					<dd><a href="layout.php">Layout</a></dd>
					<dd><a href="ui.php">UI</a></dd>
					<dd><a href="orbit.php">Orbit</a></dd>
					<dd><a href="reveal.php">Reveal</a></dd>
					<dd><a href="rails.php">Rails</a></dd>
					<dd><a href="qa.php">QA</a></dd>
				</dl>
			</div>
		</div>
		
		<div class="row">
			<div class="eight columns">
				<h3>The Grid</h3>
				<h4 class="subheader">The Grid lets you quickly put together page layouts for mobile devices and the desktop. You don't need two different sites - the Grid is built to create a rock-solid experience on all kinds of devices with the exact same markup.</h4>
				
				<hr />
				
				<h4>The Basics</h4>
				<p>The grid is built around three key elements: containers, rows, and columns. Containers create base padding for the page; rows create a max-width and contain the columns; and columns create the final structure. Everything on your page that you don't give a specific structural style to should be within a container, row and column.</p>
				
				<p>What you need to know is that <strong>columns don't have a fixed width:</strong> they can vary based on the resolution of the screen, or the size of the window (try scaling down this window to see what we mean). Design with that in mind.</p>
				<script src="http://snipt.net/embed/3b3c66062f90d4cdf9d5e1f7b61c8ce8"></script>
				
				<hr />
				
				<h4>Nesting Support</h4>
				<p>In the Grid you can nest columns down as far as you'd like. Just embed rows inside columns and go from there. Each embedded row can contain up to 12 columns.</p>
				<script src="http://snipt.net/embed/00599221b2f133b974b012dbe0ed001e"></script>
				
				<hr />
				
				<h4>Examples</h4>
				<p>Take this page for example - we've set up this page by containing this section in eight columns, and the sidebar in four. When the screen is larger than iPad resolution you'll see them laid out normally - smaller than that and columns become 100% width objects for mobile devices.</p>

				<p>Below you can see how the rows and columns come together. All columns are inside a row and for this we've colored the rows and columns for visibility. You can also see how nesting works - this example is inside an eight column container, but below we have all 12 columns to use. You can nest them down quite a ways before the percentage widths become absurdly small.</p>
				
				<div class="row display">
					<div class="four columns">
						.four.columns				
					</div>
					<div class="four columns">
						.four.columns				
					</div>
					<div class="four columns">
						.four.columns				
					</div>
				</div>
				<div class="row display">
					<div class="three columns">
						.three.columns				
					</div>
					<div class="six columns">
						.six.columns				
					</div>
					<div class="three columns">
						.three.columns				
					</div>
				</div>
				<div class="row display">
					<div class="two columns">
						.two.columns				
					</div>
					<div class="eight columns">
						.four.columns				
					</div>
					<div class="two columns">
						.two.columns				
					</div>
				</div>
				<div class="row display">
					<div class="one columns">
						.one				
					</div>
					<div class="eleven columns">
						.eleven.columns				
					</div><commit_msg>Fixed a small copy bug on the grid example page<commit_after><? $page_title = "The Grid" ?>
<?php include("includes/_documentation_head.php"); ?>
	
	<div class="container">
		<div class="row">
			<div class="twelve columns">
				<div class="foundation-header">
					<h1><a href="index.php">Foundation Docs</a></h1>
					<h4 class="subheader">Rapid prototyping and building library from ZURB.</h4>
				</div>
			
				<dl class="nice tabs mobile hide-on-phones">
					<dd><a href="index.php">Getting Started</a></dd>
					<dd><a href="grid.php" class="active">Grid</a></dd>
					<dd><a href="buttons.php">Buttons</a></dd>
					<dd><a href="forms.php">Forms</a></dd>
					<dd><a href="layout.php">Layout</a></dd>
					<dd><a href="ui.php">UI</a></dd>
					<dd><a href="orbit.php">Orbit</a></dd>
					<dd><a href="reveal.php">Reveal</a></dd>
					<dd><a href="rails.php">Rails</a></dd>
					<dd><a href="qa.php">QA</a></dd>
				</dl>
			</div>
		</div>
		
		<div class="row">
			<div class="eight columns">
				<h3>The Grid</h3>
				<h4 class="subheader">The Grid lets you quickly put together page layouts for mobile devices and the desktop. You don't need two different sites - the Grid is built to create a rock-solid experience on all kinds of devices with the exact same markup.</h4>
				
				<hr />
				
				<h4>The Basics</h4>
				<p>The grid is built around three key elements: containers, rows, and columns. Containers create base padding for the page; rows create a max-width and contain the columns; and columns create the final structure. Everything on your page that you don't give a specific structural style to should be within a container, row and column.</p>
				
				<p>What you need to know is that <strong>columns don't have a fixed width:</strong> they can vary based on the resolution of the screen, or the size of the window (try scaling down this window to see what we mean). Design with that in mind.</p>
				<script src="http://snipt.net/embed/3b3c66062f90d4cdf9d5e1f7b61c8ce8"></script>
				
				<hr />
				
				<h4>Nesting Support</h4>
				<p>In the Grid you can nest columns down as far as you'd like. Just embed rows inside columns and go from there. Each embedded row can contain up to 12 columns.</p>
				<script src="http://snipt.net/embed/00599221b2f133b974b012dbe0ed001e"></script>
				
				<hr />
				
				<h4>Examples</h4>
				<p>Take this page for example - we've set up this page by containing this section in eight columns, and the sidebar in four. When the screen is larger than iPad resolution you'll see them laid out normally - smaller than that and columns become 100% width objects for mobile devices.</p>

				<p>Below you can see how the rows and columns come together. All columns are inside a row and for this we've colored the rows and columns for visibility. You can also see how nesting works - this example is inside an eight column container, but below we have all 12 columns to use. You can nest them down quite a ways before the percentage widths become absurdly small.</p>
				
				<div class="row display">
					<div class="four columns">
						.four.columns				
					</div>
					<div class="four columns">
						.four.columns				
					</div>
					<div class="four columns">
						.four.columns				
					</div>
				</div>
				<div class="row display">
					<div class="three columns">
						.three.columns				
					</div>
					<div class="six columns">
						.six.columns				
					</div>
					<div class="three columns">
						.three.columns				
					</div>
				</div>
				<div class="row display">
					<div class="two columns">
						.two.columns				
					</div>
					<div class="eight columns">
						.eight.columns				
					</div>
					<div class="two columns">
						.two.columns				
					</div>
				</div>
				<div class="row display">
					<div class="one columns">
						.one				
					</div>
					<div class="eleven columns">
						.eleven.columns				
					</div>
{'fraction_non_alphanumeric': 0.1312523986183958, 'fraction_numerical': 0.01560701036203147, 'mean_word_length': 2.824853228962818, 'pattern_counts': {'":': 0, '<': 237, '<?xml version=': 0, '>': 237, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6683164', 'n_tokens_mistral': 3165, 'n_tokens_neox': 2366, 'n_words': 870}