Join Jen Kramer for an in-depth discussion in this video Basic setup of the XY Grid, part of Learning Foundation 6.
- [Instructor] The XY Grid System is a 12 column grid system based on Flexbox. This system is similar to a float based grid system which you may already be familiar with from previous version of Foundation. Or, maybe you've worked with a different grid system that uses floats. Like Bootstrap, or something like that. Flexbox based grid systems have similar features to those that are built with floats. However, they go one step beyond that in that there are many additional features that Flexbox offers for cell alignment and layout.
And we're going to take a look at that in great detail in this chapter. So, if you take a look at this page this is the XY Grid documentation. Everything that I'm going to be talking about in this chapter is located somewhere here inside of this page, which is quite long. There is some navigation over here on the side that will direct you through this particular page and you can jump to various topics. But I have gone ahead and set up for you a starting file inside of your begin folder for this video in your Exercise Files.
Go ahead and copy that which is called grid.html. Copy that into your working folder on your desktop. You'll also want to take a look inside of the CSS folder, from the begin folder. You'll find a file called grid.css. And you'll want to copy that into your working CSS folder, as well. And, we're going to go ahead and open up Sublime Text. And go ahead and open up that file called grid.html. So, what you'll see here is a very simple webpage that we've got going on.
You'll see that we have linked to, up here at the top of the document, we link to our standard foundation file. I've also linked to this additional file called grid.css. It just contains a few custom styles to make these cells show up a little bit better on the page. There's not a whole lot of content here so grid.css provides a little bit of coloring, and so forth. Then down here you'll see that we have the HTML markup for these particular cells. So, the first thing that you should note is that generally speaking, when it comes to responsive design grid systems there are two elements that are involved.
There's usually a row and there's a cell. The row wraps around the entire thing, the cells are located inside of that. However, with Flexbox, it's a little bit different. Our rows are going to be our flex containers. And these are going to have an option of either being called Grid X or Grid Y. That's going to depend on whether you want to lay out your Flexbox page in the X-direction. In other words, horizontally, like most grid systems work. Or, whether you want to vertically oriented grid system, which I'm going to cover a little bit later on, that would be Grid Y.
The second thing that you're going to want to do is think about your various break points that are associated with your particular grid system. XY Grid contains 12 columns just like most grid systems that are out there. And, they have several different breakpoints that are associated with that. It is mobile first so that by default, the smallest grid system is what is going to display on a mobile phone. You can add additional breakpoints to that for medium and large.
And, those are going to provide breakpoints at progressively larger screen sizes. So, typically the way this is going to work is these are going to add up to 12, but this is not a strict requirement, unlike some other grid systems. So for example, let's just start here in the very first row, here on line 13 and 14. So you'll see here that we have a div with a class of Grid X. We follow that by two divs here into which it has a class of cell. A calls of cell indicates that this is a cell in the framework.
When it's not combined with anything else this indicates that it's a single cell that's going to occupy all 12 columns regardless of what breakpoint we're talking about. In other words, a full width cell. And notice we actually have two of those inside of this particular container. That's completely legal. Okay. In the second row here what we've got going on, again, the Grid X. And here, we have two cells. Each of which is going to occupy half the space. Using the small hyphen six designation. This is the small grid system so it will never stack on top of each other.
It will always be side-by-side. Let's see that in action in the browser. If you go on ahead and open up this page inside of the browser you'll see how that works. Here at the top you'll see these full width cells occupying the full width of the screen all the way to the edges. And then underneath of that we have the to sixes next to each other. If I start to scrunch the browser down here, you'll see that those sixes stay on the same line the whole way through. That's because this is using the mobile first grid system, and the small grid system is supposed to always stay according to its particular layout, and never stack.
Okay. So, then moving on to some of the other cells that we have here. We have two additional examples. So here, we're combining different size grids. And, so what we have here is a medium designation and a large. So, at large screen sizes, which is over 1,200 pixels, these are going to show in the following configuration a smaller left column and a larger right column. However, when we get to the particular breakpoint we're going to show that as two cells that are side-by-side.
And, the example underneath of that we have a three, a five, and a four, at large. But these are all going to six as a medium. So again, remember, they don't have to technically add to 12. But if they don't add to 12, they're definitely going to wrap on the next line. Let's take a look at that in the browser. So, if you pay attention to these last two rows that are here, you'll see that here we are, at a very large screen size. We have a about one third and two thirds layout here.
And a different layout in a second row. As I start to scrunch the screen down here we hit our breakpoints. The fourth row breaks into a six and a six layout. The one underneath, this is a single row, but because it adds to 18 and not to 12, you'll see we go to six and six followed by six underneath. And then as I scrunch this down even further, we hit our next breakpoint which is the small breakpoint. And you'll see that these all stack one on top of each other like this. One last point to take a look at here inside of this cove.
For those of you who are all about the web semantics might be bothered by the large quantities of divs that you see here on this page. And I don't blame you. There's a awful lot of divitus going on here inside of this document. However, we're also not really transmitting a whole lot of semantic content here either. This isn't really saying a whole lot here on this particular webpage. You can, of course, combine any of these divs with the semantically correct HTML5 tags like article, or side, or any of the others that might be appropriate to your particular webpage layout.
So please don't let all the divs bother you.
- Working with the XY Grid system
- Adjusting margins and padding
- Block versus vertical grids
- Overriding CSS
- Including cards and callouts
- Customizing the navigation, including dropdown and drilldown menus