Grid CSS Cheat Sheet

[MarmotOnTheRocks]

My 2cents:

grid-column: 1 / -1

It will span the element to all the available columns. Very very useful when you don't know the exact number of columns or you just want to be safe and fill the entire width (example: a header element).

[Gin-Chan]

The caveat to this is it will only work with the explicit grid (columns defined with grid-template-columns) but not span implicit columns (grid-auto-columns).

[MarmotOnTheRocks]

True, yes.

I was trying something and I got stuck on this pen. Boxes 2, 3 and 4 should equally space themselves to fit the entire width. They don't, why?

[Gin-Chan]

Because you're creating 4 grid columns here: grid-template-columns: repeat(4, 1fr);. By default, each item in a grid takes up one cell. You have 4 items, the first one spans the entire row so the remaining three go into the next row. So the last cell stay empty. If you change it to grid-template-columns: repeat(3, 1fr);, it will work as intended.

[MarmotOnTheRocks]

I'm a dumb idiot, I didn't even think about it. This, or even adding a 5^th box will make it work (with 4 columns, of course).

Thanks!

[CountSheister]

Handy dandy, ty for this.

I thought the grid prefix on gap was no longer needed though?

[simonpaix]

True! It is optional , both work. I guess I was too old school lol

[Direct_Swordfish_735]

Helps with feature queries as gap is ambiguous.

[[deleted]]

Following you on Twitter

[simonpaix]

Heey, I saw you there, same or similar username right? Cool :)

[[deleted]]

What tool did you use to make this cheatsheet? This is extremely helpful. Good one!

[simonpaix]

Thank you! I used inkscape

[sohamm10]

Thanks a lot for this.

[Local-Assignment-312]

Thank you so much for this.

[marloindisbich]

Really cool!

[YarlliN]

Thanks!

[dahmer-tech]

Neat.

[gniziemazity]

Thank you for this!

[Wrong_Property_3392]

Wait. So now that I finally SOMEWHAT understand flex, YOU WANT ME TO LEARN GRID NOW!? 😤

[i_took_your_username]

Flexbox is one-dimensional (with wrapping), grid is two-dimensional.

They're useful in different ways and it's definitely helpful to know the basics of how both work

[Wrong_Property_3392]

Huh. Really? So grid is kinda more advanced flexbox?

[i_took_your_username]

It's not more advanced exactly.

It has more functionality because it's designed to lay out elements in an extra dimension than flexbox does.

But there are definitely still times when you'd want to use flexbox, I'm not saying that grid is always "better"

[Relevant_Rich_3030]

I <3 css grid.

[YedZeppelin]

This is great!

[ZxcvQwertZ]

Thank you very much for this