'.grid--justify-* .grid__cell' text align values are incorrect about reflex HOT 3 CLOSED

Also, shouldn't we add a direct child selector so that nested rows and columns don't affect inner children?

So:

.grid--justify-center > .grid__cell { text-align: center; }

from reflex.

grid__cell is intended to be used for setting display back to block and giving you back a "clean slate" for layout within the grid so I therefore wouldn't expect the content of these elements to obey flexbox layout modifiers in the grid in general. Maybe that isn't clear from the documentation or maybe my personal thinking here is not in line with your expectation of how it should behave. Given what I have said can you please think about it and let me know if you have any more feedback.

http://leejordan.github.io/reflex/docs/#grid-cell

I am on holiday right now but I will have a proper think when I get back.

from reflex.

Can you give an example of why you think this would be better behaviour? For example, if you're using grid--justify-center on a grid__col-x, these are set as flex-direction: column therefore centering the text doesn't make sense here as justify would be working on the vertical (main) axis, not the horizontal (cross) axis.

Also as I said before, grid__cell is an optional child class for giving you a block display context within the flexbox grid. Use of grid__cell is not essential for this grid and I don't think we should expect the contents of a grid__cell to have it's text aligned based on a grid modifer on it's parent.

If you can make a good case I will consider it but those are my two reservations right now. Please re-open and update if you find the time.

Thanks.

from reflex.