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
One
One
One
One
One
One
One
One
One
One
One
Two - "two columns"
Two
Two
Two
Two
Two
Three - "three columns"
Three
Three
Three
Four - "four columns"
Four
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

Two-thirds - "two-thirds column"
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"

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

HTML Buttons

HTML Forms (Labels and Inputs)

Legend in fieldset

Lists

  1. First ordered list item.
  2. Second ordered list item.
  3. 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");
}

Table

The table header
The table body with two columns

Image

A placeholder graphic

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