Responsive grid for Onsen UI

[Sergey]

Hello,

Unfortunately Onsen UI does not have a responsive grid for placing blocks on screens of various sizes. What grids can you recommend for use with Onsen UI? I have experience with Bootstrap but this library is too big to use it in a project for a responsive grid only. I’ve explored some other grids, but unlike Bootstrap, they can not hide some blocks on small screens or change their order (just make a stack instead of a line). Does anyone have a positive experience with a responsive grid for Onsen UI?

[giuliohome]

@Sergey Hi! I’m not an expert but I’ve tried something with responsive grid: why do you say it is not possible to hide some blocks? This was the first option I easily achieved with CSS3 only. For example here on SO there is a description about how to hide the headers, but I’d say the concept is applicable to any block: just define a

display: none

in the CSS3 class with the specified media queries. An example:

@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    [class*="col-"] {
        width: 50%;
    }
    [class*="colhead-"] {
        display: none;
    }
}

I’ve also tried with OnsenUI and pure JS or Angular, etc… and of course it works as expected.

Sorry if I misunderstood your question, anyway I imagine you may want a more advanced solution.

[Sergey]

@giuliohome Thanks for answer! Yea I know that we can hide blocks with CSS styles. But I mean pre-built libraries (similar to Bootstrap) which provide special classes. With this classes you can define how this block will be displayed (or hidden) on several screen sizes. With these classes you can change size, visibility, order etc. for blocks. For example - http://getbootstrap.com/css/#grid

[Fran Diox]

@Sergey Depending on what you want to make, it might be easier to go with ons-col and ons-row and apply some simple media queries: https://codepen.io/frankdiox/pen/dWpPKa?editors=1100

Those components are using flexbox so it shouldn’t be hard to modify.

[Sergey]

@Fran-Diox Thanks for Pen! I don’t have experience with Flexbox so I will be learn this possibility more detailed.