Responsive Grid Generator

Responsive Grid Generator

Three simple steps to create your own responsive grid! Please note that if you are accessing the page from a mobile device, the grid is transformed automatically into rows, so you will not see the grid itself.

1. Configure your grid:
Grid Maximum Width
Columns Gap
Columns Padding

2. Copy the grid CSS in your Styles
3. Write your rows and columns, copy the HTML samples

You can see below the rows with columns samples for the configuration as above.

2 Columns Samples

one2
one2

3 Columns Samples

one3
one3
one3
one3
two3

4 Columns Samples

one4
one4
one4
one4
one4
one4
two4
two4
two4
one4
three4

5 Columns Samples

one5
one5
one5
one5
one5
one5
one5
one5
two5
one5
two5
two5
one5
one5
three5
two5
three5
one5
four5

6 Columns Samples

one6
one6
one6
one6
one6
one6
one6
one6
one6
one6
two6
one6
one6
two6
two6
two6
two6
two6
one6
one6
one6
three6
one6
two6
three6
three6
three6
one6
one6
four6
two6
four6
one6
five6

For testing purpose, the configuration has some limitation.