Web Design Wikiclass | Tutorial / Interface Design: CSS Grid Layout

Overview: This tutorial gives you a hands-on experience in using CSS grid system to make page layouts.

Activity 1: Page layout with a simple CSS Grid system

Study the following materials: The 1Kb CSS Grid
The Grid uses 12 columns and 960 pixels.

The basic configuration is a 12 column grid system spread out over 960 pixels. Each column is 60 pixels wide with a 20 pixel gutter in between.

The CSS file you use is simply as follows:

/* ================== */

/* = 960 Fixed Grid = */

/* ================== */

.grid_1 { width:60px; }

.grid_2 { width:140px; }

.grid_3 { width:220px; }

.grid_4 { width:300px; }

.grid_5 { width:380px; }

.grid_6 { width:460px; }

.grid_7 { width:540px; }

.grid_8 { width:620px; }

.grid_9 { width:700px; }

.grid_10 { width:780px; }

.grid_11 { width:860px; }

.grid_12 { width:940px; }

.column { /* 10px margin on BOTH sides, resulting in a 20px gutter between columns */

        margin: 0 10px;

        overflow: hidden;

        float: left;

        display: inline; /* ie6 double-margin bug fix */

}

.row { /* center the row on the page, clear the interior contents with overflow:hidden hack */

        width: 960px; margin: 0 auto; overflow: hidden;

}

[Get Code]

A simple HTML for using the CSS grid is as follows:

<div class="row">

  <div class="column grid_4"> </div>

  <div class="column grid_4"> </div>

  <div class="column grid_4"> </div>

</div>

<div class="row">

  <div class="column grid_8"> </div>

  <div class="column grid_4"> </div>

</div>

<div class="row">

  <div class="column grid_2"> </div>

  <div class="column grid_4"> </div>

  <div class="column grid_3"> </div>

  <div class="column grid_3"> </div>

</div>

[Get Code]

Your tasks are do two page layouts with the CSS Grid.

You can use the following contents in testing your page layouts

Header

Title: A Simple but Great Website

Tagline: Your simple tagline here

Main navigation: Home, Services, Portfolio, About us, Contact us

Sidebar

    <h2>Categories</h2>
    <ul>
      <li>HTML Themes</li>
      <li>PSD Themes</li>
      <li>Drupal Themes</li>
      <li>Joomla Themes</li>
      <li>Logos</li>
    </ul>

    <h2>Site Features</h2>

    <p>Integer eu velit ut mi aptent porttitor mollis donec ad litora nibh ante. <a href="#">read more</a></p>

    <p>Integer eu velit ut mi aptent porttitor mollis donec ad litora nibh ante. <a href="#">read more</a></p>

Main Content

<h2>Service 1</h2>

</p>Image Class aptent taciti socio ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce enim turpis, tristique in, luctus nec, rutrum vel, arcu. Ut ac orci id pede szodales tempus. Quisque eget turpis. Ut non purus. conubia nostra, per inceptos himenaeos. Fusce enim turpis, tristique in, luctus nec, rutrum vel, arcu. Ut ac orci id pede szodales tempus. Quisque eget turpis. Ut non purus. Quisque eget turpis. Ut non purus. Suspenvdisse erat velit, ultrices nec. Quisque eget turpis. Rutrum vel, arcu. Quisque eget turpis. Ut non purus.</p>

<h2>Service 2</h2>

<p>aptent taciti socio ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce enim turpis, tristique in, luctus nec, rutrum vel, arcu. Ut ac orci id pede szodales tempus. Quisque eget turpis. Ut non purus. conubia nostra, per inceptos himenaeos. Fusce enim turpis, tristique in, luctus nec, rutrum vel, arcu. Ut ac orci id pede szodales tempus. Quisque eget turpis. Ut non purus. Quisque eget turpis. Ut non purus. Suspenvdisse erat velit, ultrices nec. Quisque eget turpis. Rutrum vel, arcu. Quisque eget turpis. Ut non purus.</p>

<h2>Service 3</h2>

</p>aptent taciti socio ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce enim turpis, tristique in, luctus nec, rutrum vel, arcu. Ut ac orci id pede szodales tempus. Quisque eget turpis. Ut non purus. conubia nostra, per inceptos himenaeos. Fusce enim turpis, tristique in, luctus nec, rutrum vel, arcu. Ut ac orci id pede szodales tempus. Quisque eget turpis. Ut non purus. Quisque eget turpis. Ut non purus. Suspenvdisse erat velit, ultrices nec. Quisque eget turpis. Rutrum vel, arcu. Quisque eget turpis. Ut non purus.</p>

Footer

Submission of your work

(Q1) Submit your HTML code to Steven.

(Q2) Beside the CSS for the grid layout, what other things you need to determine in order to finish your webpage design?

(Q3) Explain a disadvantage of using CSS grid framework rather than tailor-made CSS.

Interface Design: CSS Grid Layout

Activity 1: Page layout with a simple CSS Grid system

You can use the following contents in testing your page layouts

Submission of your work

Other CSS Grid Frameworks for you to explore