Flex vs Grid

When it comes to CSS Layout, flex and grid shine. These two techniques are so easy to write, maintain, and read compared to older techniques. In this blog post, I am not going to explain what they are, how they work, or the history of layouts in CSS. Instead, I will try to use an analogy to explain which one to choose and when.

As always, you can use anything to get the work done. Even today, some e-commerce provider companies use float for their primary layout method. So why bother consuming/producing tons of blog posts or YouTube videos for this topic? Because it’s actually important from multiple perspectives, and I believe the most important one is engineering. Establishing the healthiest layout with minimum effort.

Whenever I write layout CSS, image and video formats come to my mind. You can present everything with these formats. But there are some cases where you should choose one over the other in order to give the least effort and get the best result.

For example, if a presentation is to be made to the customer, it is more logical to make it with images instead of video. With this way you can be more interactive and you can get feedback from the customer without changing the content. It’s boring to watch a video and then pause it to give feedback and then click on the video to keep watching it, and then it starts lagging because you paused it. This is a waste of time. Let’s think the other way around. If you work at the marketing department, short videos are more applicable if you want to promote a complex feature.

It’s not about the simplicity of the media type that requires a decision to be made. It’s about how to be more effective. It’s a tacit knowledge rather than must to do.

People are busier than ever and this will continue to increase as time goes on. Wasting time with unnecessary calculations and efforts will set you back. Next time, choose engineering method.