A challengeImagine you need to create a two-column Layout. Yes, the simplest one: a column on the left, a column on the right, and some gap in-between. There’s an obvious modern solution for that:.columns { display: grid; grid-template-columns: 1fr 1fr; gap: 20px;}Done! Sure, but what if we need to support some older browsers? Flexbox then. All right! And what about text flowing from one column to another? No problem, multi-columns. How about old email clients? Well, some of us still remember how to use table layouts.You see, that’s the beauty of CSS: there are multiple solutions for almost every problem, so you can choose the one that fits your exact needs. But not just CSS, there are many HTML and SVG tricks that can help you in some cases. It’s like a natural language: the bigger your vocabulary is, the better you can express yourself.There’s even an interview strategy based on that: you can ask talent to come up with multiple ways of solving the same simple task. And this is exactly where the idea of this article came from.A friend of mine challenged me once with a task from the job interview: how many ways of making a two-column layout do you know? What a silly question, right? But it got me deeper than I thought. I couldn’t think of anything else for a while until I went through all the possible and impossible ideas in my head. It boiled down to 11 ways of making two columns with a gap.But I’d like to call them 6+5 to split them into two groups:Six pretty reasonable ones, that make sense and could be used in a real production project (or used to).Five completely wrong ones, that have some quirks, look or behave weirdly, but still accomplish the task.By the way, the results look the same in all modern browsers, even the five weird ones.Setup and rulesTo make it closer to reality, I decided to split the whole thing into two components:Columns: fixed layout with two columns and a gap.News: fluid cards that would fit the columns.The idea is to have a columns component that could be filled with the real content, not just to draw two colored boxes next to each other. The look that we’re aiming forThe news component will always stay the same, we’re going to play with the columns component only. The first news will have a lightgreen background, the second one — the famous peachpuff.Reasonable sixHow would you sort the list of reasonable options? Well, probably not alphabetically. From the best to the worst? They’re all good at certain situations and have some unique advantages. So I decided to go with the historical order: I’ll start with the ones that I’ve learned first and finish with the modern ones.Tables⚙️ Demo: two columns and a gap with tablesTables were the first layout tool available in browsers. And I used them to create my first webpage back in 2002. To make a table layout you need a parent wrapper , some rows, and cells for columns. I’m going to use BEM notation for class names,  » Read More

The post 6+5 ways to make a two-column layout appeared first on Fresh For Designers..