Thank you for mentioning. I personally don't use CSS grid a lot, cause flexbox does the trick for me.
One command I use is -
{ display : grid ;
place-items : center ;
}
To align items vertically and horizontally :)
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:
Thank you for sharing. And I 100% agree that CSS Grid is more beneficial in building large layouts. 😊
I will definitely try to use CSS Grid in my future projects.
Of course it misses a lot, it's a 5 item list, it's not trying to cover everything.
Grid isn't a 1 for 1 replacement for flexbox, plenty of situations where flex is 100% the way to go. every-layout.dev/layouts/sidebar/ ← Something like this actually just can't be done with grid. Container queries will change that, but for the time being you've still gotta reach for flex box.
Enjoyed the article thank you! For number 5, I think you forgot to mention the value for the box-sizing property:
* { box-sizing: border-box; }
It really should have been the default value! The current default content-box is definitely more confusing and only very occasionally what you actually want.
Thank you for your valuable suggestion, really appreciate it!!
I will definitely add { box-sizing: border-box; } ,
thank you for pointing it out 😊 and totally agree with the content-box problem.
Matthew Morete, maybe I got misunderstood, but I actually meant that CSS Grid is good to use instead of flex, but not for everything. In fact, it's recommended to use a combination of both. Where each of them fits better. The main point is to not ignore the CSS grid completely.
CSS grid?
Also, Grid is important.
Yup!
Thank you for mentioning. I personally don't use CSS grid a lot, cause flexbox does the trick for me.
One command I use is -
{ display : grid ;
place-items : center ;
}
To align items vertically and horizontally :)
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-itemsandplace-contentdo the same thing. With multiple items Grid will make a column, but it'splace-contentthat 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. 😄
You miss a lot. CSS grid min/max/fit content, etc. I recommend using it for building large layouts instead of flex.
Thank you for sharing. And I 100% agree that CSS Grid is more beneficial in building large layouts. 😊
I will definitely try to use CSS Grid in my future projects.
Of course it misses a lot, it's a 5 item list, it's not trying to cover everything.
Grid isn't a 1 for 1 replacement for flexbox, plenty of situations where flex is 100% the way to go.
every-layout.dev/layouts/sidebar/ ← Something like this actually just can't be done with grid. Container queries will change that, but for the time being you've still gotta reach for flex box.
Enjoyed the article thank you! For number 5, I think you forgot to mention the value for the box-sizing property:
* { box-sizing: border-box; }It really should have been the default value! The current default
content-boxis definitely more confusing and only very occasionally what you actually want.Thank you for your valuable suggestion, really appreciate it!!
I will definitely add
{ box-sizing: border-box; },thank you for pointing it out 😊 and totally agree with the
content-boxproblem.Matthew Morete, maybe I got misunderstood, but I actually meant that CSS Grid is good to use instead of flex, but not for everything. In fact, it's recommended to use a combination of both. Where each of them fits better. The main point is to not ignore the CSS grid completely.
Why not combine both?
Combine both? Could you give an example?
To get an idea... gist.github.com/ThomasJunk/ce4122e...
Got it! Thanks for sharing:)