css grid and flex 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: flexbox grid
.container {
max-width: 1335px;
margin: 0 auto;
}
.grid-row {
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
}
.grid-item {
height: 550px; /*optional*/
flex-basis: 20%; /* initial percantage */
-ms-flex: auto;
width: 259px; /*optional*/
position: relative;
padding: 10px; /*optional*/
box-sizing: border-box;
}
@media(max-width: 1333px) {/*xl*/
.grid-item {
flex-basis: 33.33%;
}
}
@media(max-width: 1073px) {/*lg*/
.grid-item {
flex-basis: 33.33%;
}
}
@media(max-width: 815px) {/*md*/
.grid-item {
flex-basis: 50%;
}
}
@media(max-width: 555px) {/*sm*/
.grid-item {
flex-basis: 100%;
}
}
Example 3: css grid vs flexbox
.wrapper {
display: grid;
grid-template-columns: repeat(auto-fill, 200px);
}