# Responsive Grid layout **URL:** \ **Category:** ionic-v1\ **Created:** [January 29, 2014, 2:35pm UTC](https://forum.ionicframework.com/t/responsive-grid-layout/707 "2014-01-29T14:35:51Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\ **Post date:** [January 29, 2014, 2:35pm UTC](https://forum.ionicframework.com/t/responsive-grid-layout/707/1 "2014-01-29T14:35:51Z")
I know that Ionic ships with grid system based on flex box but how does that fit in as a responsive layout? Basically at a certain size (most likely min/max width of 480px) the columns collapse and become a single column layout. Is this in the works or best something that I would need to write up? ---
**Author:** ![adam](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/adam/32/63947_2.png) [@adam](https://forum.ionicframework.com/u/adam)\ **Post date:** [January 30, 2014, 4:59am UTC](https://forum.ionicframework.com/t/responsive-grid-layout/707/2 "2014-01-30T04:59:06Z")
At this time the grid doesn’t do any response column change depending on viewport size. We haven’t ruled it out at all, but right now we’re focusing on phones and not tablets (we’ll get there). ---
**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\ **Post date:** [January 30, 2014, 1:49pm UTC](https://forum.ionicframework.com/t/responsive-grid-layout/707/3 "2014-01-30T13:49:22Z")
Alright let me know if need a basic responsive grid built out, I would be more than will to work something out and submit it to you guys ---
**Author:** ![adam](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/adam/32/63947_2.png) [@adam](https://forum.ionicframework.com/u/adam)\ **Post date:** [January 30, 2014, 8:43pm UTC](https://forum.ionicframework.com/t/responsive-grid-layout/707/4 "2014-01-30T20:43:34Z")
Yes, the basic responsive grid needs to be built out. But I would like to point out it won’t need all the bells and whistles that Twitter bootstrap uses: [http://getbootstrap.com/css/#grid](http://getbootstrap.com/css/#grid) Before you get coding, what features of a responsive grid were you thinking about implementing? ---
**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\ **Post date:** [January 30, 2014, 9:15pm UTC](https://forum.ionicframework.com/t/responsive-grid-layout/707/5 "2014-01-30T21:15:37Z")
I was planning on playing with the flex-direction and working out how things will go from a `flex-direction: row` to `flex-direction:column`. It shouldn’t be anything to crazy I don’t think ---
**Author:** ![adam](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/adam/32/63947_2.png) [@adam](https://forum.ionicframework.com/u/adam)\ **Post date:** [January 30, 2014, 9:21pm UTC](https://forum.ionicframework.com/t/responsive-grid-layout/707/6 "2014-01-30T21:21:35Z")
Cool, go for it. Forking the repo and submitting a pull request would be easiest. But keep the pull request to just one feature, like the grid improvements. Once pull requests become large and changing many things throughout the framework it gets difficult to merge it in. And if interested, this is a related issue too I probably won’t get around to for a while: > > > Any plans for explicit row sizing since flex box supports it? Thanks! ---
**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\ **Post date:** [February 1, 2014, 6:14pm UTC](https://forum.ionicframework.com/t/responsive-grid-layout/707/7 "2014-02-01T18:14:44Z")
Before I submit a pull request, I just wanted to see what people opinions are. This example, on the about page, works for any non-explicit column widths. Let me know what you think. Demo is on the about page [**Here’s a demo**](http://plnkr.co/edit/OSh2bEthyTVX6FcOqQWY?p=preview) ---
**Author:** ![adam](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/adam/32/63947_2.png) [@adam](https://forum.ionicframework.com/u/adam)\ **Post date:** [February 4, 2014, 9:15pm UTC](https://forum.ionicframework.com/t/responsive-grid-layout/707/8 "2014-02-04T21:15:10Z")
Cool, seems simple enough. Out of curiosity, where did the `650px` from the `@media (max-width: 650px)` come from? ---
**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\ **Post date:** [February 5, 2014, 5:37am UTC](https://forum.ionicframework.com/t/responsive-grid-layout/707/9 "2014-02-05T05:37:59Z")
@adam The 650px came from what I felt worked right in my demo. This could be changed into a sass variable that could be adjust to fit a specific case. A default value of 724px (iPad width) could be set but it should be up to the developer to decided where that break point should be depending on their content. ---
**Author:** ![adam](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/adam/32/63947_2.png) [@adam](https://forum.ionicframework.com/u/adam)\ **Post date:** [February 5, 2014, 3:05pm UTC](https://forum.ionicframework.com/t/responsive-grid-layout/707/10 "2014-02-05T15:05:27Z")
Cool, I created an issue for us to add it in, thanks! > > > http://forum.ionicframework.com/t/responsive-grid-layout/707 ---
**Author:** ![adam](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/adam/32/63947_2.png) [@adam](https://forum.ionicframework.com/u/adam)\ **Post date:** [February 11, 2014, 4:08pm UTC](https://forum.ionicframework.com/t/responsive-grid-layout/707/11 "2014-02-11T16:08:56Z")
Whatcha think? [https://github.com/driftyco/ionic/commit/1cdb999e5672391fbe02719eef060e28ea72871d](https://github.com/driftyco/ionic/commit/1cdb999e5672391fbe02719eef060e28ea72871d) ---
**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\ **Post date:** [February 11, 2014, 4:25pm UTC](https://forum.ionicframework.com/t/responsive-grid-layout/707/12 "2014-02-11T16:25:38Z")
@adam Looks great! I like the addition of the small, medium, and large break points. I think this will work out great when making apps that can take advantage of the large screen area on tablets. ---
**Author:** ![adam](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/adam/32/63947_2.png) [@adam](https://forum.ionicframework.com/u/adam)\ **Post date:** [February 11, 2014, 4:32pm UTC](https://forum.ionicframework.com/t/responsive-grid-layout/707/13 "2014-02-11T16:32:12Z")
Sorry, I should elaborate. You can now set a row to have each column break at various widths. For example, if you want a row of columns to turn in to stacked columns when the viewport is less than 568 pixels, it’d look like this: ```
column 1
column 2
``` The three built in classes are: `.responsive-sm` = smaller than landscape phone `.responsive-md` = smaller than portrait tablet `.responsive-lg` = smaller than landscape tablet Also, each class uses a sass variable that can be changed to your liking, and there’s also a `responsive-grid-break` mixin you can use to create your own. ---
**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\ **Post date:** [February 11, 2014, 4:39pm UTC](https://forum.ionicframework.com/t/responsive-grid-layout/707/14 "2014-02-11T16:39:51Z")
Ah gotcha, so you can choose the break point your self based a few presets or make your own. Simple and easy. ---
**Author:** ![adam](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/adam/32/63947_2.png) [@adam](https://forum.ionicframework.com/u/adam)\ **Post date:** [February 11, 2014, 5:20pm UTC](https://forum.ionicframework.com/t/responsive-grid-layout/707/15 "2014-02-11T17:20:36Z")
Responsive grid docs: > **[UI Components - Ionic Documentation](https://ionicframework.com/docs/components/)** > > Ionic is the app platform for web developers. Build amazing mobile, web, and desktop apps all with one shared code base and open web standards ---
**Author:** ![danr](https://avatars.discourse-cdn.com/v4/letter/d/b38774/32.png) [@danr](https://forum.ionicframework.com/u/danr)\ **Post date:** [April 28, 2014, 6:12pm UTC](https://forum.ionicframework.com/t/responsive-grid-layout/707/16 "2014-04-28T18:12:31Z")
I’m trying to work out whether it’s possible with the current responsive grid implementation and some nesting of html/css styling to combine more than one breakpoint per row group. so that for example you can specify a way of breaking content at a small and medium breakpoints to effectively allow a 1/2/3 column layout within the same row definition. What I am trying to achieve is similar to Foundation where you can specify small to be 1 column wide, medium to be say 2 and large to be 3 and the content fitting accordingly using small-12, medium-6, large-4 for example. There are a couple of ways I could work round this and something like foundation could be included but would prefer to try and solve it without repetition of markup and media queries /including a non-ionic layout library if possible. any tips appreciated. thanks dan ---
**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\ **Post date:** [April 28, 2014, 6:28pm UTC](https://forum.ionicframework.com/t/responsive-grid-layout/707/17 "2014-04-28T18:28:45Z")
Something like this? > **[Nested Flex](https://codepen.io/mhartington/pen/LcdsB)** > > A barebones starter template for Ionic development... ---
**Author:** ![danr](https://avatars.discourse-cdn.com/v4/letter/d/b38774/32.png) [@danr](https://forum.ionicframework.com/u/danr)\ **Post date:** [April 28, 2014, 7:47pm UTC](https://forum.ionicframework.com/t/responsive-grid-layout/707/18 "2014-04-28T19:47:09Z")
exactly like that 🙂 thanks a lot… very glad i can do this directly with ionic and don’t have to add any additional libraries or hack about with some custom css. i’ll keep an eye out in the future for your codepen samples - are there other ionic team members codepen’s i should also keep an eye on / can really useful stuff like this be added to the main ionic codepen repo? … i’m finding these snippets are very useful for pulling together quick working mockups/prototypes, so the more the better 🙂 cheers, dan ---
**Author:** ![blox](https://avatars.discourse-cdn.com/v4/letter/b/977dab/32.png) [@blox](https://forum.ionicframework.com/u/blox)\ **Post date:** [May 2, 2014, 3:06pm UTC](https://forum.ionicframework.com/t/responsive-grid-layout/707/19 "2014-05-02T15:06:47Z")
In Bootstrap, you can do things like: ```
.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
``` Which the community finds to be extremely helpful. Is there an Ionic equivalent? ---
**Author:** ![blox](https://avatars.discourse-cdn.com/v4/letter/b/977dab/32.png) [@blox](https://forum.ionicframework.com/u/blox)\ **Post date:** [May 2, 2014, 3:23pm UTC](https://forum.ionicframework.com/t/responsive-grid-layout/707/20 "2014-05-02T15:23:43Z")
Actually using this build: [http://getbootstrap.com/customize/?id=11477931](http://getbootstrap.com/customize/?id=11477931) Which is a template of the: - Grid system - Basic utilities - Responsive utilities - @grid-gutter-width: 0px This looks like it plays really nice so far with Ionic… May be worth considering taking out the responsive classes to keep a separation of concerns. I’m including this CSS **after** Ionic. [Next page](https://forum.ionicframework.com/t/responsive-grid-layout/707.md?page=2)