This long block of text is included as a reference to mark the width of it's containing element: <div class="gdcenter">
. Notice where the text begins and ends on the left and right? This is the limit of the containing div
element. Take a look at the code in your editing program or using your browser's element inspector. Notice how this text is a direct child of <div class="gdcenter">
?
Also look at the grid examples below. Notice how that entire block of code is inside a <div class="row">
element? That row class gives us a negative margin on both the left and right side equal to the width of the outer margins on the first and last elements in each row, allowing the blocks to perfectly fit into each row.
When one element is inside another, we call it a nested element. More specifically, each item nested inside of another is a child or descendant of outer element, which can be referred to as it's parent or ancestor.
For this grid to work properly, any nested elements inside of another grid element must also be nested within a row, in order to give it the correct margin space.
Notice in this first example of the grid block below, how the first column does not align to the left hand side of this text block? Use your element inspector to see what's going on.
Versus this example, the left side of the boxs sits left-aligned to this text. That's because these example blocks are correctly nested within a <div class="row">
, which has a negative margin on either side, allowing for the extra margins on each column element.
Use your element inspector to see what's happening with the margins.
Here are some more examples:
8 column container: This example correctly contains a row, so the two child example blocks perfectly fit inside their parent
8 column container. This example does not have a row inside it, so the two example blocks don't fit in the space.
Take a look at how they're constructed using your element inspector tool. These will help you form your layouts.
Lorem ipsum dolor sit amet, consectetur adipiscing 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.
Example Content
Example Content
Example Content
This example is using the class "right" on the row to position the whole column on the right side of the page. Still, the width of the whole row is determined by the first element inside of it that has a column width defined.
Example Content
Lorem ipsum dolor sit amet, consectetur adipiscing 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 adipiscing 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 adipiscing 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.
Example Content
Example Content
Example Content
Example Content
Example Content
Example Content
Example Content
Example Content
Example Content
This is the exact same layout as above, but with fewer visble "example" boxes surrouding the content.
Lorem ipsum dolor sit amet, consectetur adipiscing 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 adipiscing 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 adipiscing 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.
Example Content
Example Content
Example Content
Example Content
Example Content
Example Content
Example Content
Example Content
Example Content
These 4 divs are the "gd-3" class, and...
Example Content
Example Content
Example Content
Example Content
...they're the EXACT SAME code as these 4...
Example Content
Example Content
Example Content
Example Content
...the only difference is that the first set is inside a gd-center div and the second set is not.
And try resizing your browser window width. Notice the difference? The first set does not resize since they're in a parent element with a fixed width. The second set does resize since they're not contained within anything that has a width specified.
Again, these:
2 Example Content
4 Example Content
6 Example Content
5 Example Content
7 Example Content
4 Example Content
4 Example Content
4 Example Content
...are the same as these.
2 Example Content
4 Example Content
6 Example Content
5 Example Content
7 Example Content
4 Example Content
4 Example Content
4 Example Content