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 .row and .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:

A .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.

[See Codepen Example]

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.

[See Codepen Example]

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.

Using .auto will create two evenly sized cells. If you add more cells in this grid, they will split their width evenly within the grid.

[See Codepen Example]

You can mix .shrink and .auto cells together or even explicitly sized cells as needed.

[See Codepen Example]

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.

[See Codepen Example]

You can even add cell spacing in the vertical (y) direction.

[See Codepen Example]

Grid Container

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.

[See Codepen Example]

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.

[See Codepen Example]

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 .grid-x or .grid-y.

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;

[See Codepen Example]

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;

[See Codepen Example]

---