didnt know about place-items center, love grid and flex, if I knew them when I started with css, it wouldve been much easier :D taught a trainee html and css in the past few weeks, she built a shop page within just a few days with help of flex and grid.
they are just time safers and let you build uis more efficient. I always align items center h/v using df, jcc and aic. the place-items will safe me 1 css property in the future :D
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 )
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:
didnt know about place-items center, love grid and flex, if I knew them when I started with css, it wouldve been much easier :D taught a trainee html and css in the past few weeks, she built a shop page within just a few days with help of flex and grid.
they are just time safers and let you build uis more efficient. I always align items center h/v using df, jcc and aic. the place-items will safe me 1 css property in the future :D
Glad to help!😄 I too use jcc and aic a lot!
And did you know you don't need Grid for that? This works just the same:
and since
display: flex;
has wider support thandisplay: grid;
then I would stick with Flex. Use Grid when you actually need it!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.
Flex also aligns vertically and horizontally :)
🤔
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
andplace-content
do the same thing. With multiple items Grid will make a column, but it'splace-content
that does better job overall thanplace-items
:No need to be sorry :), it was just your point. Thanks for sharing about "place content: center", got to learn something new. 😄