Social Proof Section Solution using HTML and CSS by Mycah
Design comparison
Solution retrospective
I'm still learning about the grid property of CSS, which is better, bootstrap grip or CSS grid? Thanks in advance! Stay safe!
Community feedback
- @zuolizhuPosted about 4 years ago
Hey Mycah,
Nice work on this project 👏
Using bootstrap grid or css grid, it really depends on the project 🤔.
If you really care about the page loading speed and the project size:
Using CSS grid.
Bootstrap is a big framework, it will increase the size of your page and slow down the page loading speed (however, you can use purgecss to remove the unused css https://github.com/FullHuman/purgecss).
For a large size multi pages project, using a css framework is totally fine 🙆♂️. But for a small size project (like this one), I would choose 👉 the plain css.
If the size doesn't matter:
Bootstrap is easier to learn and use, but harder to modify.
CSS grid is harder to understand at the beginning, but once you master it, it is more flexible.
Here is a document from MDN might help for learning css grid: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout
And CSS grid cheat sheet: https://yoksel.github.io/grid-cheatsheet/
If the layout is just a one-column or one-row, then you don't even need grid. CSS flexbox will handle all for you😎.
Flex cheat sheet: https://yoksel.github.io/flex-cheatsheet/
Happy coding 🙌!
4@OlehTovkaniukPosted about 4 years ago@zuolizhu your reply is informative, thanks
1 - @mj305Posted about 4 years ago
For space between cards, when using grid and flexbox you can use justify-content, for grid you can use grid-gap.
0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord