css grid vs flex box code example

Example 1: 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 2: 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 3: 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 4: css grid vs flexbox

.wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px);
}