Is it just me or is this confusing?

Hey all!

Maybe my dumbness but is the “Template rows” and “Template columns” icons slightly confusing? I could just be having one of those brain fart days… I kind of get it but then I lose it. Like one of those optical illusions that takes shape if you stare at it long enough but once you look away, it’s gone.

I’d expect them to switch around. Maybe an icon showing multiple rows stretching across and multiple columns


That’s a tricky concept to make an icon for, but I get what they were attempting. Instead of viewing the box as a row or column, think of the box as holding the content that you are “chopping up” into rows or columns.

It’s a stretch, and you’ll probably just have to memorize what they actually mean. FWIW, I have similar issues with align vs. justify.

I see exactly what you’re getting at. I suspect the issue is that we have seen and recognised the rectangular shape and corresponding alignment, processed the word, realised they don’t match and then finally taken in the small arrow heads on the ends of the line next to the rectangles.

If the arrow heads were a little bigger it might make all the difference.

perhaps if the icons had lines in them so displaying 3 cells in each so it looks like 3 rows or 3 columns?

Should we just remove all icons for CSS properties? Do they provide any value / clarity, as opposed to just using property names?

Not all props have icons anyway, because it is hard to design individual icons for every one of ever-growing CSS properties.

No i don’t think it’s a good idea to get rid of them. I find it easy that it visualize things.

In this case i would make rows:

And columns:


What a fun conversation. I hope the Pinegrow team find them valuable :slight_smile:

@adamslowe Yeah totally get what they are going for too! FWIW also, Justify is along the MAIN axis (flex row = horizontal, flex column = vertical) and align is along the secondary axis. Hope that helps.

@Dom agreed. Might wanna check your typo though…

@matjaz Nooo please don’t. One of the biggest feedbacks I’ve had is the lack of visual que’s on an endless list of words (CSS props) in the UI. The reason why this thread exists is because I rely on the icons particularly for grid and it always trips me up when dealing with columns and rows. It catches me out EVERY TIME! I respect it’s tricky coming up with new icons so I guess topics like this reveal the ones that are worth investing time into.

@Guido I really like this solution. Simple. Effective.


@fakesamgregory oops, well caught!

@fakesamgregory @Guido @Dom @dan @adamslowe you are heroes who just saved a bunch of icons :slight_smile:

Will update the row / column icons.