Nowadays, there are still people who struggle a lot with design, so I’m going to share 3 ways to create columns in CSS to show the differences between flex, grid, and old-school CSS. Flex is more focused on block alignment, so to speak, while Grid is more like tables. Which one should you use? There’s no absolute rule—it’s more about making it look how you want and keeping things organized.
But today, I want to share some tips to help you improve your CSS skills:
There’s more than one way to do things
Stuck and can’t get the layout you want? Think differently. For example, if you need a circle with an image inside, you can use background and border-radius, and that would center it, but what if that image comes from the backend? It’s better to use the <img> tag to avoid inline CSS clutter. However, if you only use border-radius, it will deform if it’s not a perfect square. You can solve this by wrapping it with overflow: hidden so the extra parts aren’t visible. Sounds tricky? A more modern solution is to use object-fit, like this:
<img src="{url}" />
img {
width: 200px;
height: 200px;
border-radius: 50%;
object-fit: cover;
}Pretty simple, right?
Practice in your free time
In the previous example, it was easy to just use object-fit and move on, but you should still practice the other methods. One day, you might need to display a keyword inside the image, like this:
Now our previous solution doesn’t work, but remember the wrapper solution? That approach might fit better here. It’s a great idea for an exercise—would you like to try it and share it with us?
Analyze websites and mobile apps
When you visit a website, try analyzing it without looking at the source code—for example, the “new” version of Twitter. As soon as you open it, you’ll see three main sections: the left menu, the central posts, and the right search/trends (highlighted in red). You could build this layout using any of the three methods mentioned above (3 ways to create columns in CSS), but Twitter’s layout is more complex because the side columns are fixed while the middle one scrolls. That means the side columns might have position: fixed, or alternatively, the middle block might have height: 100vh and overflow-y. With experience, you’ll learn to tell the difference from small details—for instance, if it were the second option, the scroll would belong to the middle block, but it’s actually on the right side of the browser.
All of this was just my observation without checking the source code. In fact, whenever I see something interesting, the first thing I do is think about how it could be done, and then I either try to implement it or look up how to do it.
Some of you might have noticed the “mobile apps” part in the title—at first glance, it’s hard to tell if something was made with CSS or not, but that doesn’t matter. If it can be done with Flutter widgets (for example), it can also be done with CSS.
This article was first published in Spanish on the Lean Mind blog: Tips de CSS que podrían ayudarte. This version has been translated using AI, so please keep in mind that coherence may be lost or there may be some unusual phrasing. Thank you very much for your understanding.