how to use flex and grid in css 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: flex css end

.item {
  align-self:flex-start | flex-end | center | baseline | stretch;
}

Example 3: how to create seprate flex box for adding items into the box

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.item {
  width: 32%;
  padding-bottom: 32%; /* Same as width, sets height */
  margin-bottom: 2%; /* (100-32*3)/2 */
  position: relative;
}