Is anyone using CSS-Grid?

I’m toying with the idea of using css-grid.

It looks pretty powerful for changing layout easily without relying on bootstrap, and makes the code easy to read/maintain. The big drawback seems to be that IE only has partial support (need to use a specific IE prefix tag).

I’d be interested to hear if anyone is using this for a production-ready site yet?

1 Like

I would definitely recommend using it, but it depends on your client, really. Personally, I’m fine with those who don’t have it yet to get a default mobile layout (or single column layout). But a lot of people don’t have the vision to see this as a virtue of the web, so if you’re designing for money, you have to be sensitive to that.

3 Likes

I have used CSS Grid for my very first and only live website (not for a client), I tried many responsive methods and techniques and in my experience none could be easily implemented as CSS Grid, add on that I had written much less code with it (compared to other methods) to achieve the final result.

I love it, despite the fact that not every browser supports it. For example, UC Browser, Opera Mini and IE. But I am taking the risk as eventually it will have wider support in the future.

In Google Analytics I have seen a lot of 100% Bounce Rate, with further investigation I found out that a whole bunch of them are due to the fact that those users browse using non-supported browsers. As the website looks broken (not showing Grid) so eventually they quit from the first glance.

I guess you have to evaluate your own situation and decide upon that.

2 Likes

Css grid is just another (rather large) tool in the css toolbox. It has nothing to do with a framework like bootstrap as such which could of course use css grid if you needed to.

I believe css grid is still too early to use but if your site stats are modern browsers only then it’s worth a risk. If you are developing for a client then make sure the client is aware of browser support.

As I mentioned earlier css grid is another useful tool in the css toolbox but it does come with some complexity that will take a while to understand fully. It is very powerful but I don’t see that the run of the mill coder is really going to get to grips with it easily.

I also note that once you’ve built your site with grid it’s not so easy to go back and tweak something a few weeks later because you have to understand the way it’s been built first. It’s quite awkward to debug someone else’s grid unlike the general css properties or indeed flex box ( which is far simpler than grid). Maybe it will get easier the more I use it which has happened with flex.

My approach with things like flexbox and grid is that I will only use them if there is no simpler way to do something. Don’t use them unless you have identified a need for them. If you are not using the powerful layout mechanisms or behaviours of flexbox or grid then there is not much reason to use them (aside from the slight performance issues of flex and grid).

It may well be that in the future everyone just uses grid but I think it’s a bar set too high for some people.:slight_smile:

4 Likes

Funnily enough I’m currently building 2 new sites, both of which use CSS grid. Fortunately for both their existing visitor demographics show usage of non-grid compatible browsers is <2% so I’m not providing any fallbacks - for those few visitors the content will simply display in a linear fashion.

4 Likes

It’s a new website, migrated from a Facebook business page so unfortunately there isn’t a simple way I can see of retrieving demographic statistics. Also, it’s for my sister.

I didn’t think many were using it, good to see a few on here are adopting already - as I didn’t want to dive in with two feet without knowing of any pitfalls!

I might work towards this form of progressive enhancement, with a soft warning about switching their browser if they’re using IE.

I didn’t think css-grid is a large tool? From my understanding, it makes RWD easier to accomplish (which is where I was relating it to Bootstrap) - e.g. no more floats to make the css work etc. I’m saying this with very little knowledge of web design by the way, so I hope I’m not creating any fake news… just wanting to learn so appreciate any insight given :slight_smile:

Have you came across any drawbacks yet apart from browser support?

No it will still be up to you to make the site responsive. Html on its own is 100% responsive - it’s only when you add CSS that it starts to fall apart :slight_smile:

Css grid will allow you to lay out the page in specific ways not possible before but you still have to take care to make it responsive. I still see many broken sites using flexbox because care was not taken.

Css grid is as it names suggests a way of aligning content in rows and columns in various ways but you will still need flexbox and other css properties inside the grid to achieve the effect you want. Stop thinking of it as a framework but simply another very good tool in the toolbox. As with all tools you use the right tool for the job in hand. If everything looks like a nail…

3 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.