.grid {
  display: grid;
}
.inlineGrid {
  display: inline-grid;
}

.column-gap {
  column-gap: 100px;
}
.row_gap_xs {
  row-gap: 8px;
}
.row_gap_sm {
  row-gap: 16px;
}
.row_gap_md {
  row-gap: 24px;
}
.row_gap_lg {
  row-gap: 32px;
}
.row_gap_xl {
  row-gap: 64px;
}
.column_gap_xs {
  column-gap: 8px;
}
.column_gap_sm {
  column-gap: 16px;
}
.column_gap_md {
  column-gap: 24px;
}
.column_gap_lg {
  column-gap: 32px;
}
.column_gap_xl {
  column-gap: 64px;
}

.align_center_horizontal {
  composes: align_center_horizontal from "../../../commoncss/flex.module.css";
}

.align_center_vertical {
  composes: align_center_vertical from "../../../commoncss/flex.module.css";
}

.align_center_both {
  composes: align_center_horizontal from "../../../commoncss/flex.module.css";
  composes: align_center_vertical from "../../../commoncss/flex.module.css";
}

.align_top {
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
}

.align_bottom {
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
}

.align_baseline {
  -webkit-box-align: baseline;
  -ms-flex-align: baseline;
  align-items: baseline;
}

.justify_start {
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
}

.justify_end {
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}

.justify_around {
  -ms-flex-pack: distribute;
  justify-content: space-around;
}

.justify_center {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.justify_between {
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.alignrow1 {
  grid-template-rows: 100px 150px;
  grid-template-columns: auto auto auto auto;
}

/*.grid	
 A shorthand property for the grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, and the grid-auto-flow properties 
.grid-area	
/* Either specifies a name for the grid item, or this property is a shorthand property for the grid-row-start, grid-column-start, grid-row-end, and grid-column-end properties 

.grid-auto-columns	
/* Specifies a default column size 
.grid-auto-flow	
/* Specifies how auto-placed items are inserted in the grid 
.grid-auto-rows	
/* Specifies a default row size 
.grid-column	
/* A shorthand property for the grid-column-start and the grid-column-end properties 
.grid-column-end	
/* Specifies where to end the grid item 
.grid-column-gap	
/* Specifies the size of the gap between columns 
.grid-column-start	
/* Specifies where to start the grid item 
.grid-gap	
/* A shorthand property for the grid-row-gap and grid-column-gap properties 
.grid-row	
/* A shorthand property for the grid-row-start and the grid-row-end properties 
.grid-row-end	
/* Specifies where to end the grid item 
.grid-row-gap	
/* Specifies the size of the gap between rows 
.grid-row-start	
/* Specifies where to start the grid item 
.grid-template	
/* A shorthand property for the grid-template-rows, grid-template-columns and grid-areas properties 
.grid-template-areas	
/* Specifies how to display columns and rows, using named grid items 
.grid-template-columns	
/* Specifies the size of the columns, and how many columns in a grid layout 
.grid-template-rows	
/* Specifies the size of the rows in a grid layout 
.row-gap{
    /* Specifies the gap between the grid rows
    row-gap:10px
}*/
