Example Header Content

This div's width is styled using twelve columns. A web page using grid.css is divided into a maximum of 12 columns. All the columns styled divs sit within row styled divs. All row and columns divs sit inside a top level container div. The container has auto left and right margins to center the web page contents in the browser window. The container has a maximum width of 1200 pixels.

A Grid CSS Test Web Page

This is the test web page for the Grid Cascading Style Sheet (CSS) named grid.css, see the article Grid CSS Old Skool.

Example Main Content

Hello World! This text is in a normal paragraph, using the p html tag.

This div's width is styled using eight columns. On some of these divs a blue border has been added (not part of the Grid CSS), to allow you to see the column layouts.

This div and the next div are being used as an example of a main content area with a sidebar. Their four and eight columns styles add up to the maximum of twelve (8+4=12). Both the eight and the four columns divs sit within a row div.

Example Sidebar Content

This sidebar div has a four columns style.

Columns styled divs in the same row have a small left margin to ensure adjacent div contents are separated.

To show the responsive behaviour, if the browser window is narrowed, or this page is viewed on a mobile device, the divs will shrink in width. Once the browser window gets too narrrow, this sidebar will drop below the other divs in the same row.

Example Footer Content

This is a another row styled div containing a twelve columns div. This div is being used as a content footer.

This Test Page's Code

To see how a basic Grid CSS layout is constructed, as shown above, use the browser's view page source option. The page code is accessed via the browser's context menu (normally from a right-click, or equivalent, on the webpage). The layout above shows an example of the Grid CSS in action, more styles from Grid CSS are provided below.

Grid CSS Examples

The rest of this Grid CSS test page is showing most of the HTML elements styled using grid.css.

Column Styles

The following, with a blue border added, are various columns styled divs set within row styled divs. Columns styled divs in rows should not total more than twelve. The style is applied by setting the div's class attribute to the required column width (one, two, three...twelve), with the word column or columns. For example, for the first row below there are twelve "one column" (or "one columns") styled divs. Either the single (column) or plural (columns) can be used.

One

Two - "two columns"

Two

Three - "three columns"

Three

Four - "four columns"

Four

Five - "five columns"

Five

Two

Six - "six columns"

Six

Seven - "seven columns"

Five

Eight - "eight columns"

Four

Nine - "nine columns"

Three

Ten - "ten columns"

Two

Eleven - "eleven columns"

One

Twelve - "twelve columns"

Third and Half Columns

One-third - "one-third column"

One-third

Two-thirds - "two-thirds column"

One-third

One-Half - "one-half column"

One-Half

Column Offsets

To move a column across a page, an offset-by-x columns style can be applied.

"twelve columns"

"eleven columns offset-by-one column"

"ten columns offset-by-two columns"

"nine columns offset-by-three columns"

"eight columns offset-by-four columns"

"seven columns offset-by-five columns"

"six columns offset-by-six columns"

"five columns offset-by-seven columns"

"four columns offset-by-eight columns"

"three columns offset-by-nine columns"

2 offset 10

1 offset 11

"two-thirds column offset-by-one-third column"

"one-half column offset-by-one-half column"

"one-third column offset-by-two-thirds column"

When mixing several columns and offsets in the same row, the spacer column can be used to help align column edges to those in previous rows. The spacer column div contains a non-breaking space ( ), as used before the 2nd and 3rd offset columns below.

"four columns offset-by-one column"

3 offset 2 with spacer before and after

1 offset 1

Header Styles

Here are the header styles, h1 to h6.

Header h1

Header h2

Header h3

Header h4

Header h5

Header h6

Link Tag

Link

Link Tag with Long Text

http://www.example.com/what/if/you/used/a/long/URL/for/link/text?it-wraps

HTML Buttons

HTML Forms (Labels and Inputs)

Lists

First ordered list item.
Second ordered list item.
Etc.

First unordered list item.
Second unordered list item.
Etc.

Menu using "nav" and lists

Code and Pre

This is code on a single line:main(){printf("hello, world\n");}

Some preformatted code:

main(){
	printf("hello, world\n");
}

Pre and Pre Code in Columns

A Dixon Lanier Merritt limerick:

A wonderful bird is the pelican,
His bill holds more than his belican.
He can take in his beak,
Enough food for a week,
But I'm damned if I see how the helican.

/* Here is some code with comments. */
/* This line is an example of a comment. */
/* The next line is the start of the program. */
main(){
	/* The next line prints out a simple message */
	printf("hello, world\n");
}

Table

The table header spanning two columns
The table body	with two columns

Tables with captions in three columns

Table in Column 1 of 3
Header 1	Header 2
Column 1	Column 2

Table in Column 2 of 3
Header 1	Header 2
Column 1	Column 2

Table in Column 3 of 3
Header 1	Header 2
Column 1 with long text	Column 2 with long text

Image

Utility Styles

u-full-width - Makes an element full width
u-max-full-width - Keeps an element within its container
u-pull-right - Float right
u-pull-left - Float left
u-cf - Clear a float

Button pulled right in a six column div.

Horizontal Rule

Finally, now ending with a horizontal rule, hr.

END