Join Jen Kramer for an in-depth discussion in this video Combining small and large grids in a single page, part of Up and Running with Foundation 4.
So, what if you want to have a one multi-column layout for phones, and small screens, but maybe some sort of multi-column layout for larger screens. Is that possible in anyway with foundation? Well, it sure is. And I'm going to show you how to set that up here in this next video by combining the small grid and the large grid. So I have open here inside of supplying text 2, grid.html, if you continue to watch these videos in order. But this is the ending point of the previous video, you're all set to go. Those of you who are jumping in, there is a grid.html file inside of your exercise files folder that you can pull open and follow along. As the page gets smaller, the text starts to overlap in the three and the nine combination up here on the top.
So what I'd like to do is I'd like to change this layout. From one quarter, three quarter sort of layout here, to what if it goes 50 50 as the screen gets smaller. So we'll still have the two columns next to each other. But they'll both take up half of the page. I can do that simply by adding another class here. In addition to large three I'm going to add small-6. And likewise down here in the second item here small-6. Then of course I need to change my text so instead of three small columns we'll say three large columns but six small columns.
And then down here a big space of nine columns but a small space of six columns. And no matter how big or small my page gets, there will always be two columns. So let's just see the impact of those changes on the page so far. If you go ahead and save that little change, let's go ahead and take a look at it in the browser. And so when the screen is large, once again, you'll see that we have that one-quarter, three-quarter layout here, with the three and the nine. And as I make my page smaller by collapsing my screen here around 768 pixels, we'll wind up with two columns that are of the same width. And that is going to be maintained as the screen gets smaller. You'll notice that down here underneath, all these other cells that I haven't changed yet, they've all stacked on top of each other. That's a feature of the large grid.
We can continue on here to make some other changes. I don't have to keep these paintings for example. Right now I have the left painting, is in a large space of eight and the right painting in a small space of four. I could reverse that entirely on a mobile phone configuration. So I could say for example, small-8, large-2. And for this one I could make it small-4 and large-10.
Notice, of course, that the two smalls always have to add up to 12, so 8 here and 4 here, and the larges always have to add up to 12. So 2 here and 10 here. It's not how they add up in each individual cell, so the fact that it's small 8 and large 2 doesn't matter. I mean, it's only 10, down here it's 14. That doesn't make any difference. It's the question of the smalls adding up and the largest adding up and they always had to add up to 12. Just add a little variety here, let's add another row to this particular page. I'm just going to copy these lines here from lines 33 to 40. And I'm going to drop them on in here.
So I've got the same thing on my page twice now. I've got this row with the two large sixes and another row with two large sixes. And what I'm going to do just so you can see the difference in the behavior, is I'm going to change two of these large sixes to small sixes. And I'm going to leave these other two down here to large sixes and that way you'll see the behaviors together all on one page as the page collapses. Everything else I'm going to leave essentially the same. So, I'm going to go ahead and save my page again and let's take one more look at it in my browser. Once again, when the page is big, it looks the way we expected. Down here, underneath the photos we have, these two columns are divided into two equal sizes, we have two of those, they're both next to each other on the page.
Now, as I start to collapse the page, you'll see that the grid is resizing here until, once again, we hit roughly 768 pixels. And now, at this point, our three and nine combination in the top row has changed to a six and six. Our combination here that was two and ten has gone to eight and four at the smaller size. And our small sixes are still next to each other, whereas the larges are on top of each other. So you can see that this grid is quite sophisticated as I continue to collapse the page.
You can keep these columns here on a very small screen by using that small grid, or you can stack things on top of each other using the large grid. How things change is completely up to you, your designs, your client requirements, and what kinds of devices you're going to need to serve ultimately with this particular webpage.
- What is Foundation?
- Exploring the grid system
- Working with lists
- Styling buttons, thumbnail images, and more
- Including flexible video
- Adding breadcrumbs to the navigation
- Working with Clearing, the responsive lightbox
- Creating accordion panels and tabs for in-page navigation