The grid below shows a combination of nested, reversed, and gutterless grids. Each integer represents the high-level grid item you are looking at, and each decimal represents the grid item’s level of nesting (if any), e.g. Grid 2.3 represents the third nested grid inside of the second major grid.
Grid 1.1
Grid 1.2
Grid 1.3
Grid 2.1
Grid 2.2
Grid 2.3
Grid 3.1
Grid 3.2
Grid 3.3
Grid 4.1
Grid 4.2
Grid 4.3
Grid 4.4
Grid 5.1
Grid 5.2
The grid below shows a combination of nested, fully-responsive grids using breakpoint-specific classes.
Grid 1.1
Grid 1.2
Grid 1.3
Grid 2.1
Grid 2.2
Grid 2.3
Grid 2.4
Grid 2.5
Grid 3.0
Grid 4.0
Table Heading 1 | Table Heading 2 | Table Heading 3 | Table Heading 3 | Table Heading 4 |
---|---|---|---|---|
Table Footer 1 | Table Footer 2 | Table Footer 3 | Table Footer 3 | Table Footer 4 |
Table Cell 1 | Table Cell 2 | Table Cell 3 | Table Cell 4 | Table Cell 5 |
Table Cell 1 | Table Cell 2 | Table Cell 3 | Table Cell 4 | Table Cell 5 |
Table Cell 1 | Table Cell 2 | Table Cell 3 | Table Cell 4 | Table Cell 5 |
Table Cell 1 | Table Cell 2 | Table Cell 3 | Table Cell 4 | Table Cell 5 |
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Some sort of famous witty quote marked up with a <blockquote> and a child <p> element.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.