How to choose better CSS grids
Before you read: This blog is over a year old. After checking this article I found that the information might be out of date and just irrelevant in the current times. Some links might also 404.
This article is intended for beginner Front-end Developers.
Often, while building websites, a Front-end Developer has to encounter the most common problem, i.e. choosing grids. In this article, I’ll compare various grids that I’ve used in the past and which one I prefer to use currently.
Picking up anything in particular, depends greatly upon what you are building. If it is a website like unsplash.com or cerisal.com, then your obvious choice maybe to go with something most popular these days: Masonry. Or Bootstrap. Although both being truly a masterpiece, they might not be the right fit for every requirement.
Using custom grids
There are a lot of sites that let you generate your own grids. And for the most part this maybe be the ideal solution for many. However, one possible con is that they fail miserably when your needs change. Most of these generators create grids based on what you feed in a form. So, if you want to be future-proof, my advice is to stay away from these grid generators.
Using CSS Frameworks
This is the most popular choice among most web developers. Bootstrap, Foundation and Skeleton are all in this list. For the most part, these frameworks are undoubtedly very useful and most importantly, future safe. Because they are being developed by a community of talented developers and are refined after reviewing the loads of constructive feedback they receive.
But I am not quite a fan of Bootstrap and I’m not ashamed to admit this, besides the fact that it is so damn popular. And all the reasons are packed in this little webpage:
All Bootstrap websites almost look the same. Experienced developers can always tell if a website is using Bootstrap just by the look of it. But if you’re not like me, and only care about a functional website and design is not your thing, then go ahead. Be another sheep in the herd.
Speaking of “sheeps”, I don’t use Foundation as well. I haven’t even tried it yet. Foundation contains too many pre-styled components, like Buttons, dropdowns, accordions and what not. Just looking at the download page will give you an idea what I’m talking about. And this is the problem, ladies and gentlemen. Well, at least for me, it is. I would always prefer a framework that takes the minimalistic approach; one that keeps it’s nose out of the business most of the time and hands you the freedom to craft your own things. This gives birth to originality, a quality that truly makes you stand out as a Front-end Developer and even as a Designer for that matter.
This is exactly the reason why I use Skeleton. It’s extremely lightweight, around 11 KB right now, I guess. Yes, it lacks in a lot of things. But this is what I like it for and I’ve already explained why. Minimalism. These sort of frameworks encourage you to do your thing.
However, I’m not a fan of grids in Skeleton either. And that’s why I use a customized version of Skeleton for my projects. Basically, what I did was that I removed the grid from theskeleton.css file and infused the grids from MaterializeCSS, another CSS framework which can be used to incorporate Google’s Material Design in your website.
My Maskeleton (MaterializeCSS grids + Skeleton) CSS Library is posted here on Github Gist, if you wanna try it out.
Forget material design, MaterializeCSS contains one hell of a grid system. It’s simple yet so functional, you will instantly fall in love with it. My suggestion is to try it once before you make your final choice.
I would also like to add here that, developing a good understanding of Bootstrap or Foundation is an important skill for a Front-end Developer. There might be scenarios where you might be obliged to use Bootstrap. The reason I’m insisting you to invest some time in these frameworks, is because of their popularity. You can’t deny the numbers.
Using JavaScript grid libraries
This is another category for grids, where you have a fixed space to fill up with items. It doesn’t matter if all the items have the same size or not. This is where we use JavaScript grid libraries, or as I like to call them, “automated grids”. Automated because these grid systems calculate the empty space and then smartly arrange the items in it, so the layout looks somewhat like a brick wall:
Most popular example of such grid system is David Desandro’s Masonry. David has also made Isotope, which is the advanced form of Masonry. Both are JavaScript driven and use it to arrange the grid items. This JavaScript driven approach is resource hungry. On low RAM devices, sites using Masonry often tend to slow down the entire browser. I know this because I have used Masonry on a Laptop with a Pentium B940 CPU and 2GB of RAM. So it’s tried and tested.
An alternative is to use a CSS-driven approach, like Salvattore. Which is what I have used in Cerisal.com, a photo board website. Salvattore is faster than Masonry and works just as good. The reason is that Salvattore is configured purely in your CSS. It doesn’t need any JavaScript (or jQuery) initialization and works with dynamic content too.
Conclusion
Choosing a grid system is something that shouldn’t be ignored in the beginner phase of Front-end Development. It’s a basic and simple skill that is must be mastered, because in the future you might be dealing with loads of data and information, and you might think:
“Oh boy! How the hell do I arrange all this stuff gracefully?”
Answer will be grids. Grid views will cross your way every now and then in Front-end Development. So make your choice wisely, and try practicing different layouts, right from a piece of paper all the way to your browser. Try different libraries and frameworks. And stick to the one you like. You’ll eventually become more creative with them and will be able to create stunning websites in no time.
This post was originally posted on Ken, my personal blog.
Original article: https://preeteshjain.com/ken/choose-better-grids
Articles on my Medium profile are added after some days they have been published on Ken. To stay up to date with my articles, bookmark Ken!
If you have any suggestions, please leave them in the comments. I’d really appreciate your constructive remarks.
