359 posts
  • Envato Studio (Microlancer) Beta Tester
  • Football Contest Participant/Runner-up
  • Sold between 10 000 and 50 000 dollars
  • Most Wanted Bounty Winner
  • Exclusive Author
  • Bought between 1 and 9 items
  • Referred between 50 and 99 users
  • Has been a member for 4-5 years
-axnorpix says

Hi guys,

What do you think about Grids System in Responsive Web Design ? Is there any benefits by using Grids System in Responsive Web Design ?

Thank you :)

577 posts Magento Elite & Gravity Maker
  • Elite Author
  • Sold between 100 000 and 250 000 dollars
  • United States
  • Has been a member for 4-5 years
  • Referred between 50 and 99 users
  • Bought between 1 and 9 items
  • Exclusive Author
GravityDept says

Good: using grid principles for consistency.

Bad: placing everything on a grid that dissolves under 768px, which almost every responsive grid system does.

It’s better to write some generic grids, but tailor the majority to the content at hand. Rarely can that can be bundled into a theme or pattern library.

115 posts
  • Sold between 50 000 and 100 000 dollars
  • Bought between 50 and 99 items
  • Referred between 100 and 199 users
  • Has been a member for 2-3 years
  • Envato Studio (Microlancer) Beta Tester
  • Exclusive Author
  • Bulgaria
Aether-Themes says

Imo if you are building a theme or template grids are a positive thing, so that buyers would have something to rely on if they want to add custom content themselves. However I think that most people are overdoing their designs with the grid systems, you are not required to put every single section of your site in the grid, if you want to build a cool custom section that can’t be heavily modified by buyers, I would suggest moving out of the grid and doing something better-looking for smaller devices with the freedom you have outside the grid.

359 posts
  • Envato Studio (Microlancer) Beta Tester
  • Football Contest Participant/Runner-up
  • Sold between 10 000 and 50 000 dollars
  • Most Wanted Bounty Winner
  • Exclusive Author
  • Bought between 1 and 9 items
  • Referred between 50 and 99 users
  • Has been a member for 4-5 years
-axnorpix says

Thank you guys

332 posts
  • Envato Studio (Microlancer) Beta Tester
  • Most Wanted Bounty Winner
  • Author had a File in an Envato Bundle
  • Has been a member for 5-6 years
  • Sold between 10 000 and 50 000 dollars
  • Exclusive Author
  • Bought between 10 and 49 items
  • Referred between 50 and 99 users
  • Romania
QBKL says

Bad: placing everything on a grid that dissolves under 768px, which almost every responsive grid system does.

Which is why we have classes, IDs, media queries for. If grid dissolves below 768px it means you basically get a full-width box ready to be targeted and restyled as you wish through your own CSS. Correct me if I’m wrong…

577 posts Magento Elite & Gravity Maker
  • Elite Author
  • Sold between 100 000 and 250 000 dollars
  • United States
  • Has been a member for 4-5 years
  • Referred between 50 and 99 users
  • Bought between 1 and 9 items
  • Exclusive Author
GravityDept says


Bad: placing everything on a grid that dissolves under 768px, which almost every responsive grid system does.
Which is why we have classes, IDs, media queries for. If grid dissolves below 768px it means you basically get a full-width box ready to be targeted and restyled as you wish through your own CSS. Correct me if I’m wrong…

Why bother? Just build the right grid in the first place. It’s only two lines of extremely simple CSS. The point was a grid framework doesn’t solve all the needs of a complex system. It can for simple sites, but there’s an expectation to always use the grid if you have it and that’s negatively impacting some layouts.

332 posts
  • Envato Studio (Microlancer) Beta Tester
  • Most Wanted Bounty Winner
  • Author had a File in an Envato Bundle
  • Has been a member for 5-6 years
  • Sold between 10 000 and 50 000 dollars
  • Exclusive Author
  • Bought between 10 and 49 items
  • Referred between 50 and 99 users
  • Romania
QBKL says

That’s why the best grids available these days dissolve below 768px. At least one of the reasons. To give you freedom to adjust your design as you see fit in lower resolutions. So what you tell me is that it’s harder to write that CSS targeted to an ID, maybe in a media query, than to simply write the same lines outside of a grid system? I’m sorry but I don’t follow.

You’re basically getting the same 100% content width space to play with. Except the fact that you get it in a grid based system. How you decide to style the content inside that box/column/grid it’s all up to you and your stylesheet.

577 posts Magento Elite & Gravity Maker
  • Elite Author
  • Sold between 100 000 and 250 000 dollars
  • United States
  • Has been a member for 4-5 years
  • Referred between 50 and 99 users
  • Bought between 1 and 9 items
  • Exclusive Author
GravityDept says

@ QBKL — That’s not as efficient or maintainable. What you’re suggesting is using one design system (grid framework) to manage a content’s layout above 768px and using another design system (custom per content ID) to manage its layout below 768px.

I’m saying just use the grid framework where it applies, but where it doesn’t just write a one-off grid tailored to the content across all breakpoints. Then you never have two systems affecting one piece of content. It’s the single responsibility principle.

It’s not about feasibility, it’s about simplifying the architecture.

332 posts
  • Envato Studio (Microlancer) Beta Tester
  • Most Wanted Bounty Winner
  • Author had a File in an Envato Bundle
  • Has been a member for 5-6 years
  • Sold between 10 000 and 50 000 dollars
  • Exclusive Author
  • Bought between 10 and 49 items
  • Referred between 50 and 99 users
  • Romania
QBKL says

Somehow I believe we’re really not understanding each other. What I am saying is that, either if you use a base grid or not, you still have to style your elements. And I am not sure how you think that having a grid in place would:

1. Complicate your styling structure 2. Generate 2 design systems.

Let’s take this for example:

<element>Element here</element>
<grid>
    <column>Whatever stuff here</column>
</grid>

Would the above be easier to style than let’s say:

<grid>
    <column>
        <element>Element here</element>
    </column>
</grid>

Or that:

<element>Element here</element>
<custom-row>
    <custom-column>Column One</custom-column>
    <custom-column>Column Two</custom-column>
</custom-row>

Would be easier than the first two?

It’s been discussed the fact that grid based designs (particularly Bootstrap) tend to look the same, but please excuse me if I believe that it happens so only because people are happy with what Bootstrap offers and don’t get too in depth with further customization below 768. Bootstrap, just as any other grid only provides a backbone to your project. The rest is up to you. And you don’t even have to load it fully with all the bells and whistles and burden your code.

Maybe it’s all just a matter of coding habits. ;)

Regards, Alex

577 posts Magento Elite & Gravity Maker
  • Elite Author
  • Sold between 100 000 and 250 000 dollars
  • United States
  • Has been a member for 4-5 years
  • Referred between 50 and 99 users
  • Bought between 1 and 9 items
  • Exclusive Author
GravityDept says

Not sure where you were going with that because I see three different examples. I’m assuming the markup is identical if you’re using a grid framework or a custom grid.

In that case, to manage the full viewport range you’d need to employ a grid framework AND a custom grid. That’s two design systems. That’s bad for maintainability and extensibility.

It would be better to NOT use the framework and just use a custom grid, so you can target the specific content in play. Then you only have one design system applied to one set of content. That gives you more control for writing very little new code.

The only reason frameworks don’t dictate grid splits below 768 is because some content can’t compress well (but some can). So they pick a high value that ultimately leads to a less-than-useful layout in many cases.

That’s what I’m advocating not applying the framework if you intend to have non-linear layout beneath 768px. Otherwise it’s fine to use the generic grids a framework provides. The argument I’m making is for a separation of concerns. Both approaches “work” technically.

by
by
by
by
by
by