Examples

Download newest SpaceGrid.zip

Make responsive websites easy and fast!


Examples of DIV frames for main content build on SpaceGrid 1.0 with SEO4
Also see the folder /layouts for finish website layouts build on SpaceGrid 1.0

Copy/paste these DIVS into your choosen layout, give it a little CSS
and boom! You have a front-end responsive design for your website

Use SpaceGrid with SpaceBoot for more and full CSS & Javascript functionality

H2 Headline

Fullwidth Responsive Div

SpaceGrid Fullwidth spacearea

Double div (Full width in Responsive)

SpaceGrid 1/2 Spacearea
SpaceGrid 1/2 Spacearea

Double div (Also Double div in Responsive)

SpaceGrid half Spacearea
SpaceGrid half Spacearea

Double div made out of 3 (Also Double div in Responsive)

SpaceGrid 1/3 spacearea halfmobile
SpaceGrid 2/3 spacearea halfmobile

3 Divs (But only 2 shows in Responsive)

Uses the class 'mobilenone' in the spacearea-class
You can use 'mobilenone' on every spacediv, spacegrid, spacegroup, spacearea you want.

This is spacearea 1
This is spacearea 2
This spacearea dont show up on mobile responsive.
This simple SpaceDiv DONT show in Responsive (mobilenone)
This simple SpaceDiv ONLY show in Responsive (browserhide)
Spacearea 1/4
Spacearea 1/4
Spacearea 1/4
Spacearea 1/4

Div with first & last class

1 of 5
1 of 5
1 of 5
1 of 5
1 of 5

Examples of 6

6 divs made out of 6 (Simple & clean)

1 of 6
1 of 6
1 of 6
1 of 6
1 of 6
1 of 6

6 divs made out of 12 (Double div in responsive)

2 of 12
2 of 12
2 of 12
2 of 12
2 of 12
2 of 12

Now you ask, can i make 3 out of 6? - Well ofcause!

2 of 6
2 of 6
2 of 6

What about 2 of 6? - Yup!
It turns yellow because of the spacediv class 'spacediv2' like above

3 of 6 SpaceArea
3 of 6 SpaceArea

But then you should use 'span_half' instead
But mark that it will show a Double Div in responsive

Half SpaceArea
Half SpaceArea

SpaceDiv for logos

Double div in Responsive

1 of 12
1 of 12
1 of 12
1 of 12
1 of 12
1 of 12
1 of 12
1 of 12
1 of 12
1 of 12
1 of 12
1 of 12

Match Height on a GridGroup

Match Height with Javascript

A lot of content
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Not so much content