How I Lost MadCSS

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

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 for a long time.

I recently logged back into their SynHax¹ website that powers the battles, so I could figure out just what the heck went wrong. Best to learn from our mistakes, right?

I Started Forcing Widths

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

It started with:

body {
  width: 100vw;
}Code language: CSS (css)

This was wholly unnecessary as the body is already the width of the viewport. 🤦. Fortunately, the margins were set to zero; otherwise, I would have introduced scrollbars, which would have made the problem even worse.

As that didn’t fix it, I forced the grid itself, the #container to also be as wide as the viewport.

#container {
  width: 100dvw;
}Code language: CSS (css)

This was extra counter-productive as there was padding on the body, meaning instead of squeezing, 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.

The correct thing to do was just leave everything pretty normal and old school:

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

#container {
  height: 100%;
}Code language: CSS (css)

I Even Bungled The Grid Setup

It’s three columns and two rows. This is correct:

#container {
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);

  /* or go simple */
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}Code language: CSS (css)

I wrote…

grid-template-rows: repeat(1, 50%);Code language: CSS (css)

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 to write:

grid-template-rows: repeat(2, 50%);
/* or */
grid-template-rows: 50% 50%;Code language: CSS (css)

That would have caused another grid blowout because then the height would have been 100% plus the gap. Jeez, self, get it together. I think I was trying to use 50% in an attempt the vertical blowout that was also happening.

The Wrong Overflow

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; on each of the elements in the grid cells. I tend to think of that like overflow: hidden; but stronger, but I obviously I don’t understand it well enough, because as you can see:

Text Size Overflow

Circling back, though, what was the root cause of the horizontal overflow? It looks like everything is plenty squishy enough to fit into three columns without needing to break out of a 1fr column. But again, I got in my own way.

The trouble we can blame on one Mrs. Brenda Montgomery.

Well, and the fact that I didn’t allow enough horizontal room for that unbreakable last name.

Yet again, for an unknown god-forsaken reason, I applied extra padding to the right side of the testimonial container.

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 isn’t strong enough to make it a circle 🤷‍♀️). The gap in that header isn’t squishy either. And neither is “Montgomery”. Literally nothing was willing to budge, so: blowout.

So many things could have fixed this.

1. A normal 15px of padding on the right, instead of 30px, would have fixed it.
2. Putting flex-wrap: wrap on the header would have fixed it. (Well, in real life, it would be fine, but it wouldn’t have matched the example.)
3. Heck, even 14px instead of 15px font-size would have fixed it!

The End

Obviously, this whole thing was just for fun and in no way affects my sense of self-worth.

---

1. It’s honestly a super cool system. After being invited to join a battle, you are prompted to connect your local file system to a folder where the HTML and CSS files live. That means you can use any local editor you’d like! As you save the files, they’re synced to the website, where a preview is built and turned into an image that visually diffs against the target we’re coding against. ↩︎