css flex vs grid code example
Example 1: css grid vs flexbox
/* Answer to: "css grid vs flexbox" */
/*
Grid is much newer than Flexbox and has a bit less browser
support. That’s why it makes perfect sense if people are
wondering if CSS grid is here to replace Flexbox.
To be exact:
1. Grid can do things Flexbox can’t do.
2. Flexbox can do things Grid can’t do.
3. They can work together: a grid item can be a flexbox container.
A flex item can be a grid container.
For more information on this topic, go to:
https://css-tricks.com/css-grid-replace-flexbox/
*/
Example 2: css grid vs flexbox
/* Both flexbox and grid are based on this concept.
Flexbox is best for arranging elements in either a single row,
or a single column. Grid is best for arranging
elements in multiple rows and columns.
The justify-content property determines how the extra space of the
flex-container is distributed to the flex-items. */
Example 3: css grid vs flexbox
.wrapper {
display: grid;
grid-template-columns: repeat(auto-fill, 200px);
}