The follow example illustrates how you can used the "expanded" class to make your grid rows completely fluid. Adding this class to a Section with a grid layout makes your grid capable of expanding from edge to edge in the browser. You'll also learn about the "collapse" class that you can use to remove the padding from the columns in your grid.
Section 1 - 6x6 Grid
This example illustrates a standard grid configuration with two content elements. The first element is a Picture element and the second is a Text element. Each element in the grid is configured with a column size of 6 columns which means each content element will fill 1/2 of the space in a standard 12 column grid layout.
Section 2 - Expanded 6x6 Grid
This example is a copy of the example in Section 1 above. The only difference is that we have added the "expanded" Class to our Section element. The "expanded" class causes our grid to become completely fluid. In this example, the grid now extends to the edges of it's container which in this case is the browser window.
Note: There is still padding around the individual columns so the Picture and the Text elements still include padding between the content and the edge of the browser window.
Section 3 - Expand 6x6 Grid With No Padding
This example illustrates how to remove the padding from the columns in an expanded grid by adding the "collapse" Class.
Note: The "collapse" class can be prefixed with a size attribute such as medium-collapse to provide further control if you want to remove the padding on your columns for certain screen sizes.
Section 4 - Expand 6x6 Grid With Only The Picture Padding Removed
This final example builds on the example in section 3 and restores the padding on the Text element by moving the Text element into a new Section that has it's own grid layout. The padding around the text element is restored since the new grid is not configured with the "collapse" attribute.
Note: The padding between the Picture and the Text element is 1/2 the width of the padding between these two elements in Section 1 because the padding on the right side of the picture is still collapsed.