@zohodesk/layout/es/Grid/css/Grid.module.css

Unified Component Library - Layout

.fullSize {
  height: 100%;
  width: 100%;
}

/* Container Props */

.grid {
  display: grid;
}

.inlineGrid {
  display: inline-grid;
}

.row {
  grid-auto-flow: row;
}

.column {
  grid-auto-flow: column;
}

.dense {
  grid-auto-flow: dense;
}

.rowDense {
  grid-auto-flow: row dense;
}

.columnDense {
  grid-auto-flow: column dense;
}

/* align-items props start */

.alignItems_start {
  align-items: start;
}

.alignItems_end {
  align-items: end;
}

.alignItems_center {
  align-items: center;
}

.alignItems_stretch {
  align-items: stretch;
}

.alignItems_baseline {
  align-items: baseline;
}

/* align-items props end */

/* align-self props start */

.alignSelf_start {
  align-self: start;
}

.alignSelf_end {
  align-self: end;
}

.alignSelf_center {
  align-self: center;
}

.alignSelf_stretch {
  align-self: stretch;
}

.alignSelf_baseline {
  align-self: baseline;
}

/* align-self props End */

/* align-content props start*/

.alignContent_start {
  align-content: start;
}

.alignContent_end {
  align-content: end;
}

.alignContent_center {
  align-content: center;
}

.alignContent_stretch {
  align-content: stretch;
}

.alignContent_baseline {
  align-content: baseline;
}

.alignContent_spaceBetween {
  align-content: space-between;
}

.alignContent_spaceAround {
  align-content: space-around;
}

.alignContent_spaceEvenly {
  align-content: space-evenly;
}

/* align-content props end*/


/* justify-items props start */

.justifyItems_start {
  justify-items: start;
}

.justifyItems_end {
  justify-items: end;
}

.justifyItems_center {
  justify-items: center;
}

.justifyItems_stretch {
  justify-items: stretch;
}

.justifyItems_baseline {
  justify-items: baseline;
}

/* justify-items props end */

/* justify-self props start */

.justifySelf_start {
  justify-self: start;
}

.justifySelf_end {
  justify-self: end;
}

.justifySelf_center {
  justify-self: center;
}

.justifySelf_stretch {
  justify-self: stretch;
}

.justifySelf_baseline {
  justify-self: baseline;
}

/* justify-self props end */

/* justify-content props start */

.justifyContent_start {
  justify-content: start;
}

.justifyContent_end {
  justify-content: end;
}

.justifyContent_center {
  justify-content: center;
}

.justifyContent_stretch {
  justify-content: stretch;
}

.justifyContent_spaceBetween {
  justify-content: space-between;
}

.justifyContent_spaceAround {
  justify-content: space-around;
}

.justifyContent_spaceEvenly {
  justify-content: space-evenly;
}

/* justify-content props end */

.scroll_vertical {
  overflow-y: auto;
  overflow-x: hidden;
}

.scroll_horizontal {
  overflow-x: auto;
  overflow-y: hidden;
}

.scroll_both {
  overflow: auto;
}

/* Custom Grid Classes */
.layout {
  grid-template-columns: repeat(var(--zdg_base_columns, 12), 1fr);
  grid-template-rows: repeat(var(--zdg_base_rows, 1), 1fr);
  gap: var(--zdg_layout_gap, var(--zd_size15));
}

.layout_areas {
  grid-template-areas: var(--zdg_layout_areas, "content");
  gap: var(--zdg_layout_gap, var(--zd_size15));
}

.auto_repeat {
  grid-template-columns: repeat(var(--zdg_auto_repeat, auto-fit), minmax(var(--zdg_auto_repeat_min, 0), var(--zdg_auto_repeat_max, 1fr)));
}

.auto_repeat_fixed {
  grid-template-columns: repeat(var(--zdg_auto_repeat, auto-fit), var(--zdg_auto_repeat_val, 1fr));
}

.custom_columns {
  grid-template-columns: var(--zdg_custom_columns, 1fr);
}

.custom_rows {
  grid-template-rows: var(--zdg_custom_rows, auto);
}

.auto_columns {
  grid-auto-columns: var(--zdg_auto_columns, auto);
}

.auto_rows {
  grid-auto-rows: var(--zdg_auto_rows, auto);
}


/* Custom Grid Item Classes */
.item_area {
  grid-area: var(--zdg_item_area, content);
}

.item_col_span1 {
  grid-column: auto/span 1
}

.item_col_span2 {
  grid-column: auto/span 2;
}

.item_col_span3 {
  grid-column: auto/span 3
}

.item_col_span4 {
  grid-column: auto/span 4
}

.item_col_span5 {
  grid-column: auto/span 5
}

.item_col_span6 {
  grid-column: auto/span 6
}

.item_col_span7 {
  grid-column: auto/span 7
}

.item_col_span8 {
  grid-column: auto/span 8
}

.item_col_span9 {
  grid-column: auto/span 9
}

.item_col_span10 {
  grid-column: auto/span 10
}

.item_col_span11 {
  grid-column: auto/span 11
}

.item_col_span12 {
  grid-column: auto/span 12
}