Flexbox vs Grid-is one better than the other?

Throughout my never ending quest to learn the best design techniques with CSS I constantly struggled with one thing- How the heck to get content within my site/application to align the way I want it to. Still being what I would consider a newbie in design and programming I would get the content to display to what I thought was “good enough” or “that will do” state but by doing this everything I was creating was looking the same. There was no distinct personality or variety to my sites. So how can I create different layouts without using a framework. I know what some of you are thinking “why are you doing it the hard way. Use frameworks its much quicker”. You are absolutely right, I have used frameworks and they are much quicker and it is easier to get the desired look you are going for, but how would I learn how to do it on my own if all I did was use frameworks. I want to learn how to lay things out on my own- how else will I learn the techniques needed to be a really good developer. I could go on a tangent on this but that is not the point of this blog. That will be for another day.

So in doing my research on how to get things to layout dynamically on a page I came across the terms flex-box and grid. I thought to myself what is this? There is a lot of debate on which one is better…flex or grid. So I thought I would test them both out for myself to see if one is really better than the other. So for those of you who are not familiar let me give you a quick definition of both. Flex-box is a one dimensional layout model while Grid is a two dimensional layout model meaning that you can handle both rows and columns.

So what would be the best way to try both ways out. I decided to make a calculator. When you look at your typical calculator you have 4 rows that typically have 4 buttons in each row. Then you have a long screen at the top that displays your calculations. Perfect. I do want to keep this post fairly short so I am not going to go into detail on how I created my calculators. I you want to see the finished project you can go to blog.trinixcs.com (note: the finished product is not yet posted.  I am still working on the javascript portion of the calculator).

So which one do I prefer? After creating both calculators I have decided I like both. I think both are great ways to create dynamically responsive layouts. It all depends on how crazy you want to get with your layouts. If I was designing something like a blog page I would probably use Grid because you may have blogs that are not as long as others or you may want to add some photos. If I am designing a navbar for a site I would probably use flex-box. I am not an expert by any means at any of this. If you were to put all the time I have into learning web development I may have 6-9 months. These are simply my opinions. Some of you may have your own opinions on which one is better and that is fine; we all have thoughts of our own. So keep that in mind when reading this

Leave a Reply

Your email address will not be published. Required fields are marked *