Intro to Foundation | Lesson #176
Learn the Flexbox based powerhouse XY Grid
Use your Flexbox know-how with the new XY Grid to leave layout challenges in behind.
This is part four of our series on Flexbox. By now you should have a good understanding of how Flexbox’s behavior, syntax, and positioning properties. This lesson is all about the new Flexbox based XY Grid. The Foundation XY Grid is huge advancement in Grids. It’s inspired by CSS Grid, but uses Flexbox under the hood which is supported by browsers now. This mean you can take advantage of Flexbox, equal height containers, auto and shrink sizing, vertical and horizontal layouts (hence the XY name) and lots more. You’ll come away knowing the ins-and-outs of the XY Grid to create complex layouts faster and with less code.
What’s in a name?
If you’re familiar with other class based grid systems, you’ll likely be familiar with classes like
.columns. Because Flexbox allows us to easily go from a horizontal layout to a vertical layout, there are limitations to this naming. Using a
.row in a vertical layout makes little sense. Neither does
.columns stacked on top of
.columns. So it’s for this reason, this new grid uses all new modern classes.
Ingredients of the XY Grid
To create a horizontal layout, like a traditional “row”, you’ll use the
.grid-x class. This is your parent flexbox container. The flex children, your containers for your content, use the
.cell class. So a typical grid layout would look like this:
.grid-x can be split into 12 total cells. This allows you to size the width (or height if using
.grid-y) of your cells by a multiple of 2, 3, 4, or 6 cells.
In the above example we have 2 cells in a
.grid-x. There are no sizing classes defined on the cells, so they will by default be full width, 12 cells wide and stack on top of each other.
Sizing your cells
You can add various sizing classes to your cells to size them. Foundation has default breakpoint classes which allow you to size your cells based on breakpoint. Foundation is also mobile-first, meaning that the small breakpoint applies to larger breakpoints unless specifically overridden. Let’s break this down in an example:
Here we have each cell sized to take up the width of 6 cells. Since the grid is 12 columns, 6/12 = 50%. Each cell will take up 50% of the width of the grid on the small breakpoint and larger. We can override this sizing on larger breakpoints too:
Since we have set no small size class, on the small breakpoint the cells will default to full width, 12 cells wide and stack on top of each other. Then on the medium breakpoint they will be each 50% width and side-by-side. On large the first cell will be 4 cells wide, and the ladder is 8 cells wide.
Auto and Shrink Sizing your Cells
You don’t always have to set explicit sizing on you cells. Shrink sizing with the
.shrink class allows the content to dictate the sizing of the cell. And
.auto will allow the cell to take up the remaining space in the grid.
.auto will create two evenly sized cells. If you add more cells in this grid, they will split their width evenly within the grid.
You can mix
.auto cells together or even explicitly sized cells as needed.
The Space Between Cells
In traditional grids, there is typically padding in your columns to create spacing between your content containers. The XY Grid allows you to decide if you want spacing or not by explicitly adding it as needed. So by default, cells have no spacing between them.
Margin and/or Padding Cell Spacing
With the XY Grid, you can now use margin to create spacing between cells which is an advancement in grids. Margin creates real spacing between cells because margin is on the outside of them. This allows for less markup and better control with background colors.
In the below example, we’ll add some margin and padding spacing to show the difference.
You can even add cell spacing in the vertical (y) direction.
So far, all of our grids have been fluid, meaning they would be the width of the viewport. To contain your grids with a maximum width and centered horizontally in the page you can wrap your grids with a
.grid-container. Pair the
.grid-container with a class of
.grid-container-padded to add outer spacing on the edges of the viewport.
You don’t need a container for each
.grid-x. You can wrap as many grids in the container as you’d like.
Vertical Y Grids
You can also flip your grids in the vertical orientation. This essentially means the grid will now flip 90 degrees. You can still use the responsive sizing classes with your cells.
Note: Browsers treat vertical containers differently than horizontal container. A
.grid-x will take up 100% of the available width. A
.grid-y needs a fixed height or a vh (viewport height) to size correctly.
Positioning Cells Vertically and Horizontally
The XY Grid has many positioning classes to help you position cells. Let’s start with horizontal positioning. Since the grid is using flexbox, these classes will apply to the parent element, the
Horizontal positioning classes:
.align-center= justify-content: center;
.align-left= justify-content: flex-start;
.align-right= justify-content: flex-end;
.align-justified= justify-content: space-between;
.align-spaced= justify-content: space-around;
Vertical positioning classes:
.align-middle= align-items: center;
.align-top= align-items: flex-start;
.align-bottom= align-items: flex-end;
Vertical positioning classes on individual cells:
.align-self-middle= align-self: center;
.align-self-top= align-self: flex-start;
.align-self-bottom= align-self: flex-end;
.align-self-stretch= align-self: stretch;
About the instructor
Rafi Benkual oversees the Foundation Forum. Rafi managed people, stores and small organizations before joining ZURB as our Foundation Advocate.
Product Design Lessons, Direct to Your Inbox
We're just getting started, so sign up and we'll keep you in the know with our product design lessons. No spam here.