DEV Community

Discussion on: Responsive Design CSS tips

sharakpl profile image
Sharak • Edited on

And did you know you don't need Grid for that? This works just the same:

display: flex;
place-items: center;
Enter fullscreen mode Exit fullscreen mode

and since display: flex; has wider support than display: grid; then I would stick with Flex. Use Grid when you actually need it!

Thread Thread
fidalmathew profile image
Fidal Mathew Author

I just checked own my own, using display: grid; it aligns vertically and horizontally (exactly at the center of div). And using display: flex; it does something weird.(like if the flex-direction is row(by default), then it will align center column wise )

Try it out :) , you will understand better.

Thread Thread
sharakpl profile image
Sharak

Flex also aligns vertically and horizontally :)

Thread Thread
fidalmathew profile image
Fidal Mathew Author

🤔

Thread Thread
sharakpl profile image
Sharak • Edited on

Sorry @fidalmathew , I was wrong. Flex does require at least 2 properties set to align any number of items both vertically and horizontally and by default it will make a row of multiple items. Grid requires only 1 property. With 1 element to place both place-items and place-content do the same thing. With multiple items Grid will make a column, but it's place-content that does better job overall than place-items:

display: grid;

Thread Thread
fidalmathew profile image
Fidal Mathew Author

No need to be sorry :), it was just your point. Thanks for sharing about "place content: center", got to learn something new. 😄

Some comments have been hidden by the post's author - find out more