rules of grid-flex.css

/* GRID COMPLETE */
#garden {
  display: grid;
  grid-template-columns: 20% 20% 20% 20% 20%; /* grid-template-columns is for the width of the column*/
  grid-template-columns: 50%; /* % in grid-template-columns is for the width of the column*/
  grid-template-columns: repeat(5, 20%); /* repeat() is for the number of columns and the width of the column*/
  grid-template-columns: 100px 3em 40%; /* px, em, and % in grid-template-columns is for the width of the column*/
  grid-template-columns: 1fr 5fr; /* fr is for respective fraction of the available space*/
  grid-template-rows: 20% 20% 20% 20% 20%; /* grid-template-rows is for the height of the row*/
  grid-template: 20% 20% 20% 20% 20% / 20% 20% 20% 20% 20%; /* grid-template is a shorthand for grid-template-rows and grid-template-columns*/
  grid-template: 60% 1fr/200px; /*here 60% is for the height of the row and 1fr is for the width of the column and 200px is for the width of the column*/
}
.water {
  grid-column-start: 1; /* grid-column-start is for the first column of the grid*/
  grid-column-end: 3; /* grid-column-end is for the last column of the grid*/
  grid-column-span: 2; /* grid-column-span is for the number of columns the grid should span*/
  grid-column: 4 / 6; /* grid-column is a shorthand for grid-column-start and grid-column-end*/
  grid-row-start: 1; grid-row-end: 3; grid-row: 4 / 6; /*grid-row is similar to grid-column*/
  grid-area: 1 / 1 / 3 / 6; /* grid-area is a shorthand for grid-row-start, grid-column-start, grid-row-end, and grid-column-end*/
  grid-order: 1; /* grid-order is for the order of the grid item*/
  grid-gap: 10px; /* grid-gap is for the space between the grid items*/
}

/* FLEX COMEPLETE */
#pond {
  display: flex;
  /* justify content works row wise and align-items works column wise*/
  justify-content: flex-start; /* justify-content is for the horizontal alignment of the flex items*/
  justify-content: flex-end; /* flex end is for end of the horizontal alignment of the flex items*/
  justify-content: center; /* center is for the cenetr of the horizontal alignment of the flex items*/
  justify-content: space-between; /* space-between is for the space between the flex items, if there is 3 element then 2 will be corner and 1 will be in the middle*/
  justify-content: space-around; /* space-around is for the space around the flex items, if there is 3 element then around every element there will be space*/
  align-items: flex-start; /* align-items is for the vertical alignment of the flex items*/
  align-items: flex-end; /* flex end is for end of the vertical alignment of the flex items*/
  align-items: center; /* center is for the cenetr of the vertical alignment of the flex items*/
  align-items: stretch; /* stretch is for the stretch of the vertical alignment of the flex items*/
  align-items: baseline; /* baseline is for the baseline of the vertical alignment of the flex items*/
  align-self: center; /*align-self is for individual flex item*/
  flex-direction: row; /* flex-direction is for the direction of the flex items*/
  flex-direction: row-reverse; /* row-reverse is for the reverse direction of the flex items*/
  flex-direction: column; /* column is for the column direction of the flex items*/
  flex-direction: column-reverse; /* column-reverse is for the reverse column direction of the flex items*/
  order: 1; /* order is for the order of the flex items*/
  flex-wrap: nowrap; /*nowarp is for the no wrap of the flex items*/
  flex-wrap: wrap; /*wrap is for the wrap of the flex items*/
  flex-wrap: wrap-reverse; /*wrap-reverse is for the reverse wrap of the flex items*/
  flex-flow: row nowrap; /* flex-flow is a shorthand for flex-direction and flex-wrap*/
  flex-flow: column wrap; /* flex-flow is a shorthand for flex-direction and flex-wrap*/
  align-content: flex-start; /*align-items works when there is only one row, but align-content works when there is more than one row*/
}