The greatest CSS layout trick you've ever learned?

thanks for the link ! I was actually thinking I needed to look into that but didn’t know where !

Yeah… I felt the same few weeks ago when I found out. xD
I was using before and after for like 1-2 years and haven’t thought about it before :stuck_out_tongue:

The one that really blew my mind from older devs was finding a way to finally fix inline-block (after box-sizing: border-box) and completely nullify the need for floats in some regards. The only drawback is the need to redeclare the font-size. Inline-block calculates width + font-size (don’t quote me, it’s my takeaway from the issue.) I don’t know how I had missed it having read CSS-Tricks and other major hotspots religiously as an Front End Developer for the last 3+ years.

.container { font-size: 0; margin: 0; padding: 0; } .container .inline-container-1, .container .inline-container-2 { display: inline-block; font-size: 1rem; width: 50%; }

Another cool trick I ran across over a year ago was the ability to declare nth-child “CSS Mod Queries” based on range selectors. It can get kind of messy looking when you break it down into media queries and all in all Flexbox and CSS-grid are a better replacement for this kind of thing going forward… but it is great for compatibility purposes as long as IE9 is still on most employer’s peripherals.

Explained in detail here.

2 Likes