YouTip

Below we have collected some commonly used grid examples. * * * ## Three Equal Columns This example demonstrates how to create three equal columns (33.3%/33.3%/33.3%), displaying three columns on medium and large devices, and automatically stacking on small devices: ### Example [Try it »](#) * * * ## Three Unequal Columns This example demonstrates how to create three unequal columns (25%/50%/25%), displaying three columns on medium and large devices, and automatically stacking on small devices: ### Example [Try it »](#) * * * ## Two Equal Columns This example demonstrates how to create two equal columns (50%/50%), where the column ratio remains 50%/50% on small, medium, and large devices: ### Example [Try it »](#) * * * ## Two Unequal Columns This example demonstrates how to create two unequal columns (33.3%/66.6%), where the column ratio remains 33.3%/66.6% on small, medium, and large devices: ### Example [Try it »](#) * * * ## Change Column Order Use the `.small|medium|large-push-*` and `.small|medium|large-pull-*` classes to change the order of columns: ### Example [Try it »](#) * * * ## Nested Columns You can use nested grids (columns within columns): ### Example [Try it »](#) * * * ## Mixed: Mobile and Desktop The Foundation grid system has three columns: `.small-*` (mobile), `.medium-*` (tablet), and `.large-*` (desktop). These classes can be dynamically combined to make the layout more flexible: **Tip:** Each class scales up, so if you want small and large screen devices to have the same width, you can specify `.small-*`. ### Example [Try it »](#) * * * ## Mixed: Mobile, Tablet and Desktop ### Example [Try it »](#) * * * ## Centered Columns Columns can be centered using the `.small-centered` class. Medium and large devices can inherit the centering from small devices, but you need to set the centering class `.large-centered` on large devices. ### Example [Try it »](#) * * * ## Column Offsets You can use the `.large-offset-*` (or `.small-offset-*`) classes to shift columns to the right. The number of columns for the left margin is controlled by the * sign: ### Example [Try it »](#) * * * ## Incomplete Columns If the sum of the columns in a row is not 12, Foundation will automatically float the last column to the right and use blank space to fill the remaining columns. The optional `.end` class is used to set the last column element to float to the left: ### Example [Try it »](