{"id":9235,"date":"2026-04-10T10:45:34","date_gmt":"2026-04-10T15:45:34","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=9235"},"modified":"2026-04-10T10:45:36","modified_gmt":"2026-04-10T15:45:36","slug":"how-i-lost-madcss","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/how-i-lost-madcss\/","title":{"rendered":"How I Lost MadCSS"},"content":{"rendered":"\n

I was very lucky to get to compete in Syntax’s MadCSS<\/a> Battle recently. I got rightfully ousted in the 2nd round<\/a> by Scott himself! See the outcome of the battle in the image below.<\/p>\n\n\n\n

\"Comparison<\/figure>\n\n\n\n

I feel like I had the correct idea of how to approach it all just fine. But can you see how I lost? A GRID BLOWOUT! WTF! I feel like I’ve been helping people AVOID grid blowouts <\/a>for a long time.<\/p>\n\n\n\n

I recently logged back into their SynHax1<\/a><\/sup> website that powers the battles, so I could figure out just what the heck went wrong. Best to learn from our mistakes, right?<\/p>\n\n\n\n

I Started Forcing Widths<\/h2>\n\n\n\n

Once the grid blew out on me (started hanging off the right edge), a bad instinct kicked in, where I started setting width<\/code> values that I didn’t need to set.<\/p>\n\n\n\n

It started with:<\/p>\n\n\n

body<\/span> {\n  width<\/span>: 100vw<\/span>;\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
This was wholly unnecessary as the body is already the width of the viewport. \ud83e\udd26. Fortunately, the margins were set to zero; otherwise, I would have introduced scrollbars, which would have made the problem even worse.<\/p>\n\n\n\n
As that didn’t fix it, I forced the grid itself, the #container<\/code> to also be as wide as the viewport.<\/p>\n\n\n
#container<\/span> {\n  width<\/span>: 100<\/span>dvw;\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
This was extra<\/em> counter-productive as there was padding<\/code> on the body<\/code>, meaning instead of squeezing,<\/em> which is what I was hoping to do on the grid, I was forcing it to be as wide as the viewport but nudged over because of the body padding. So even if I figured out the underlying issue, I’d be forcing the grid blowout myself.<\/p>\n\n\n\n
The correct thing to do was just leave everything pretty normal and old school:<\/p>\n\n\n
html<\/span>, body<\/span> {\n  margin<\/span>: 0<\/span>;\n  padding<\/span>: 0<\/span>;\n  width<\/span>: 100%<\/span>;\n  height<\/span>: 100%<\/span>;\n}\n\n#container<\/span> {\n  height<\/span>: 100%<\/span>;\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
I Even Bungled The Grid Setup<\/h2>\n\n\n\n
It’s three columns and two rows. This is correct:<\/p>\n\n\n
#container<\/span> {\n  grid-template-columns<\/span>: repeat<\/span>(3<\/span>, 1<\/span>fr);\n  grid-template-rows<\/span>: repeat<\/span>(2<\/span>, 1<\/span>fr);\n\n  \/* or go simple *\/<\/span>\n  grid-template-columns<\/span>: 1<\/span>fr 1<\/span>fr 1<\/span>fr;\n  grid-template-rows<\/span>: 1<\/span>fr 1<\/span>fr;\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
I wrote…<\/p>\n\n\n
grid-template-rows<\/span>: repeat<\/span>(1, 50%);<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
Which makes like zero sense, but essentially works fine because it makes one row 50%, and the other takes up the remaining space. Not quite correct (because of the gap) but pretty close. I probably meant<\/em> to write:<\/p>\n\n\n
grid-template-rows<\/span>: repeat<\/span>(2, 50%);\n\/* or *\/<\/span>\ngrid-template-rows<\/span>: 50% 50%;<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
That would have caused another<\/em> grid blowout because then the height would have been 100% plus the gap<\/code>. Jeez, self, get it together. I think I was trying to use 50%<\/code> in an attempt the vertical blowout that was also happening.<\/p>\n\n\n\n
The Wrong Overflow<\/h2>\n\n\n\n
So even if I didn’t bungle the grid setup and width situation, I’d have a blowout. That’s because for whatever god-forsaken reason, I went for overflow: clip;<\/code> on each of the elements in the grid cells. I tend to think of that like overflow: hidden;<\/code> but stronger, but I obviously I don’t understand it well enough, because as you can see:<\/p>\n\n\n\n
\"\"
hidden<\/code> works, clip<\/code> does not.<\/figcaption><\/figure>\n\n\n\n
Text Size Overflow<\/h2>\n\n\n\n
Circling back, though, what was the root cause of the horizontal overflow? It looks<\/em> like everything is plenty squishy enough to fit into three columns without needing to break out of a 1fr<\/code> column. But again, I got in my own way.<\/p>\n\n\n\n
The trouble we can blame on one Mrs. Brenda Montgomery<\/strong>.<\/p>\n\n\n\n
Well, and the fact that I didn’t allow enough horizontal room for that unbreakable last name. <\/p>\n\n\n\n
Yet again, for an unknown god-forsaken reason, I applied extra<\/em> padding to the right<\/em> side of the testimonial container.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
That padding isn’t squishy. Brenda’s avatar I had set at 50px wide, and that’s not squishy either (and apparently aspect-ratio: 1<\/code> isn’t strong enough to make it a circle \ud83e\udd37\u200d\u2640\ufe0f). The gap<\/code> in that header isn’t squishy either. And neither is “Montgomery”. Literally nothing was willing to budge, so: blowout.<\/p>\n\n\n\n
So many<\/em> things could have fixed this.<\/p>\n\n\n\n
    \n
  1. A normal 15px<\/code> of padding on the right, instead of 30px<\/code>, would have fixed it.<\/li>\n\n\n\n
  2. Putting flex-wrap: wrap<\/code> on the header would have fixed it. (Well, in real life, it would be fine, but it wouldn’t have matched the example.)<\/li>\n\n\n\n
  3. Heck, even 14px<\/code> instead of 15px<\/code> font-size<\/code> would have fixed it!<\/li>\n<\/ol>\n\n\n\n\t\t
    \n\t\t\t