Skip to content

Latest commit

 

History

History
142 lines (122 loc) · 6.33 KB

page-layout.md

File metadata and controls

142 lines (122 loc) · 6.33 KB
layout title
default
Page Layout Examples

Page Layout Examples

The following examples are more complete page layout examples. Most of these were initially created for my CSS Grid Layout presentation. I have linked to the smaller examples that demonstrate individual aspects of creating these layouts.

Layout 1: a simple grid

<div class="col-sm-6">
	<p>This is a simple, non-responsive layout using the line-based placement properties. I have created a layout that is essentially an old school liquid layout with two fixed width columns and an auto stretching content area.</p>

	<ul class="list-group">
		<li class="list-group-item"><a href="/examples/#example1">Defining a Grid</a></li>
		<li class="list-group-item"><a href="/examples/#example2">Line-based placement</a></li>
	</ul>
</div>

Layout 2: a simple responsive grid

<div class="col-sm-6">
	<p>This is a simple, responsive layout using the line-based placement properties and three breakpoints.</p>
	<p>I am using the shorthand `grid-row` and `grid-column` properties in this example.</p>

	<ul class="list-group">
		<li class="list-group-item"><a href="/examples/#example1">Defining a Grid</a></li>
		<li class="list-group-item"><a href="/examples/#example2">Line-based placement</a></li>
		<li class="list-group-item"><a href="/examples/#example3">Line-based placement shorthand</a></li>
	</ul>
</div>

Layout 3: a responsive layout using named Grid Areas

<div class="col-sm-6">
	<p>A simple responsive layout with three breakpoints. This time I am using the `grid-area` to define the named areas of the grid and describing the grid with the `grid-template-areas` property within the Media Queries.</p>

	<ul class="list-group">
		<li class="list-group-item"><a href="/examples/#example11">Defining Grid Areas</a></li>
		<li class="list-group-item"><a href="/examples/#example13">Redefining Grid Areas with Media Queries</a></li>
	</ul>
</div>

Layout 4: 16 column flexible grid

<div class="col-sm-6">
	<p>An example demonstrating how Grid can be used to create a flexible multiple column grid. This example uses the repeat keyword and named grid lines.</p>

	<ul class="list-group">
		<li class="list-group-item"><a href="/examples/#example2">Line-based placement</a></li>
		<li class="list-group-item"><a href="/examples/#example8">Line-based placement named lines with span</a></li>
		<li class="list-group-item"><a href="/examples/#example9">The Repeat Keyword</a></li>
	</ul>
</div>

Layout 5: Placing elements into Grid Areas on the 16 column grid

<div class="col-sm-6">
	<p>Creating a simple three column layout by placing items onto our 16 column grid, as an example of how this could be used in practice.</p>

	<ul class="list-group">
		<li class="list-group-item"><a href="/examples/#example2">Line-based placement</a></li>
		<li class="list-group-item"><a href="/examples/#example8">Line-based placement named lines with span</a></li>
		<li class="list-group-item"><a href="/examples/#example9">The Repeat Keyword</a></li>
	</ul>
</div>

Layout 6: AG Grid Example

<div class="col-sm-6">
  <p>I was interested in whether I could recreate the example used in <a href="http://www.zell-weekeat.com/susy2-tutorial/">this blog post</a> about the <a href="http://susy.oddbird.net/">Susy Grid System</a>. Susy is a very clever semantic Grid system that relies on pre-processing CSS to calculate your grid.</p>

  <ul>
    <li>I have fixed the row heights just to match the Susy example. In Grid Layout you actually have the benefit of being able to easily have full height columns if you want them.</li>
    <li>This is an example where the lack of subgrid became an issue. The layout is absolutley doable but you can see the problem of fraction widths in the gutters. I'd have liked the nested grids to conform to the main grid.</li>
    <li>It works! Other than the subgrid issue I could create this complex nested grid without any need for a preprocessor, complicated math, or clear fixes.</li>
  </ul>
</div>