a simple responsive grid in views. how?

By vladimirkomarek on 5 Apr 2017 at 01:48 UTC

hi i am just trying to find out the easiest way to make a grid in my view
made by 3 columns in desktop mode (when the screen is big)
and just 1 column when the screen is small (mobile mode)
i've tried responsive grids but i cant make it work..
any other solution?
thanks

Comments

I assume you mean you tried

John_B commented 5 April 2017 at 04:24

I assume you mean you tried the Fluid Grid module and it does not work?

If that is the case you are probably going have to build your own flexbox CSS for your view. Whilst it will need a little custom work, Google does find some code out there to get you started, for example https://github.com/13jupiters/ViewsFlexbox for Drupal 8 and the Backdrop FlexiViews Views plugin which will probably work on Drupal 7 with little or no adaptation.

Digit Professionals specialising in Drupal, WordPress & CiviCRM support for publishers in non-profit and related sectors

are you sure

vladimirkomarek commented 5 April 2017 at 09:59

that fluid grid is about to make responsive grids on different media sizes?

Sorry, I have not used it.

John_B commented 5 April 2017 at 10:11

Sorry, I have not used it. You may want to test it if the documentation does not answer the question.

You ask the 'easiest' way to make responsive grids. The easiest way is probably using CSS Grids. Of course you will have to write custom CSS. That is normal in Drupal. The reason you might not want to use the easiest method is that it currently has poor browser support.

Writing CSS using flexbox is easy if you already know the Flexible Block Layout, though flexbox a little complex to learn.

Digit Professionals specialising in Drupal, WordPress & CiviCRM support for publishers in non-profit and related sectors

i have no problems with CSS

vladimirkomarek commented 5 April 2017 at 11:00

let's see if i can do that

the problem

vladimirkomarek commented 6 April 2017 at 13:09

is that is not friendly with all browsers

https://www.drupal.org

ruggestrong commented 7 April 2017 at 22:48

https://www.drupal.org/project/views_responsive_grid

did you use it?

vladimirkomarek commented 8 April 2017 at 02:04

i tried but i couldnt

test views_fluid_grid and you

ruggestrong commented 8 April 2017 at 13:28

test views_fluid_grid and you can have something like this http://golfershotels.it/golfer/en/search-hotel

well

vladimirkomarek commented 8 April 2017 at 14:18

this is not bad

Views Responsive Grid + Flexbox

peezy commented 24 May 2017 at 16:41

As long as you are OK to use Flexbox you can easily create a responsive grid layout using the Responsive Grid format in Views. Make sure to use these settings:

Number of columns: 1
Alignment: Horizontal
Keep default column and row classes

... and add have these styles in your theme:

.views-responsive-grid .views-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
}
.views-responsive-grid .views-column {
   // adjust as needed
    margin: 1rem;
}

You will also need to give the columns a margin.
I recommend an autoprefixer for cross-browser compatibility, but this works well for me.

Note that in D8, the Responsive Grid format is in Core, but for D7 you will need this contrib module.