gridstack.native.css in GridStack 8.2

This file is implementing native browser CSS Grid Layout.

Not needed by original js-driven GridStack, nor static Bootstrap/Foundation. This is a counterpart of gridstack.library.css. This file is NOT loaded at admin UI pages, just front-end.

At most cases, no need to re-touch this file.

See also

https://developer.mozilla.org/en-US/docs/Web/CSS/grid

css/gridstack.css for details

File

css/gridstack.native.css

/**
 * @file
 * This file is implementing native browser CSS Grid Layout.
 *
 * Not needed by original js-driven GridStack, nor static Bootstrap/Foundation.
 * This is a counterpart of gridstack.library.css.
 * @see https://developer.mozilla.org/en-US/docs/Web/CSS/grid
 * This file is NOT loaded at admin UI pages, just front-end.
 *
 * At most cases, no need to re-touch this file.
 *
 * @see css/gridstack.css for details
 */

.gridstack--native {
  /* Unfortunately  attr() support is still sparse, not even Chrome 2020.
  * This part is dynamically overriden by gridstack.native.min.js to make it
  * responsive based on config. */
  grid-auto-rows: 80px;
  /* grid-auto-rows: attr(data-cell-height px, "80px"); */
  gap: 10px; /* csslint allow: known-properties, gap */
  /* gap: attr(data-vertical-margin px, "10px");  csslint allow: known-properties, gap */
  /* Masonry grid-template-columns: repeat(auto-fill, minmax(30%, 1fr)); */
  /*
  grid-template-columns: repeat(4, 80px);
  -ms-grid-columns: 1fr 1fr 1fr 1fr;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 100px);
  grid-template-columns: repeat(12, 1fr);
  */
  grid-template-columns: auto;
  align-content: start; /* csslint allow: known-properties, start */
  justify-content: center;
}

.gridstack--native.is-gs-enabled {
  display: grid;
}

/** Without margin. */
.gridstack--native.is-gs-nomargin {
  gap: 0; /* csslint allow: known-properties, gap */
}

.gridstack--native > .box {
  display: flex;
  align-items: center;
  justify-content: center;
  /* @todo must disable
  overflow: visible; */
}

/* The original .box js-driven layout is absolute like Masonry, etc.*/
.gridstack--native > .box,
/**
 * Absolute is bad for Isotope. Good for static.
 * Relative bad for embedded Slick.
 * @todo re-check for the best deal.
 */
.gridstack--native .box__content {
  position: relative;
}

/* The rules are defined at gridstack/ratio, dups in case forgotten/ overriden. */
.gridstack--native.is-gs-enabled .box__content {
  height: 100%; /* Should be 0 with padding hack, but it doesn't work that way. */
  /*
   * @todo check for various contents, including empty, if ok using relative.
   * Make it absolute again if any issue. Relative is possible when its inner
   * contents have defined heights as solved by JS for few contents. Not all.
   */
  /* position: absolute; */
  width: 100%; /* Normaly auto for JS layout. */
}

/** grid-row == height */
.gridstack--native > .box[data-gs-height='1'] {
  -ms-grid-row-span: 1;
  grid-row: span 1;
}

.gridstack--native > .box[data-gs-height='2'] {
  -ms-grid-row-span: 2;
  grid-row: span 2;
}

.gridstack--native > .box[data-gs-height='3'] {
  -ms-grid-row-span: 3;
  grid-row: span 3;
}

.gridstack--native > .box[data-gs-height='4'] {
  -ms-grid-row-span: 4;
  grid-row: span 4;
}

.gridstack--native > .box[data-gs-height='5'] {
  -ms-grid-row-span: 5;
  grid-row: span 5;
}

.gridstack--native > .box[data-gs-height='6'] {
  -ms-grid-row-span: 6;
  grid-row: span 6;
}

.gridstack--native > .box[data-gs-height='7'] {
  -ms-grid-row-span: 7;
  grid-row: span 7;
}

.gridstack--native > .box[data-gs-height='8'] {
  -ms-grid-row-span: 8;
  grid-row: span 8;
}

.gridstack--native > .box[data-gs-height='9'] {
  -ms-grid-row-span: 9;
  grid-row: span 9;
}

.gridstack--native > .box[data-gs-height='10'] {
  -ms-grid-row-span: 10;
  grid-row: span 10;
}

.gridstack--native > .box[data-gs-height='11'] {
  -ms-grid-row-span: 11;
  grid-row: span 11;
}

.gridstack--native > .box[data-gs-height='12'] {
  -ms-grid-row-span: 12;
  grid-row: span 12;
}

/** grid-column == width */
.gridstack--native > .box[data-gs-width='1'] {
  -ms-grid-column-span: 1;
  grid-column: span 1;
}

.gridstack--native > .box[data-gs-width='2'] {
  -ms-grid-column-span: 2;
  grid-column: span 2;
}

.gridstack--native > .box[data-gs-width='3'] {
  -ms-grid-column-span: 3;
  grid-column: span 3;
}

.gridstack--native > .box[data-gs-width='4'] {
  -ms-grid-column-span: 4;
  grid-column: span 4;
}

.gridstack--native > .box[data-gs-width='5'] {
  -ms-grid-column-span: 5;
  grid-column: span 5;
}

.gridstack--native > .box[data-gs-width='6'] {
  -ms-grid-column-span: 6;
  grid-column: span 6;
}

.gridstack--native > .box[data-gs-width='7'] {
  -ms-grid-column-span: 7;
  grid-column: span 7;
}

.gridstack--native > .box[data-gs-width='8'] {
  -ms-grid-column-span: 8;
  grid-column: span 8;
}

.gridstack--native > .box[data-gs-width='9'] {
  -ms-grid-column-span: 9;
  grid-column: span 9;
}

.gridstack--native > .box[data-gs-width='10'] {
  -ms-grid-column-span: 10;
  grid-column: span 10;
}

.gridstack--native > .box[data-gs-width='11'] {
  -ms-grid-column-span: 11;
  grid-column: span 11;
}

.gridstack--native > .box[data-gs-width='12'] {
  -ms-grid-column-span: 12;
  grid-column: span 12;
}

/* The disabled grid for mobile. */
.gridstack--native.is-gs-disabled,
.gridstack--native.is-gs-disabled > .box {
  display: block;
}

/**
 * It appears CSSLint doesn't abide by its own rule. It still complains for
 * something it doesn't understand while already being told to ignore it.
 * Perhaps it is high time Drupal tests to switch to stylelint?
 */
/* csslint ignore:start */
@media screen and (min-width: 1024px) {
  /* https://github.com/CSSLint/parser-lib/issues/228 */
  .gridstack--native {
    grid-template-columns: repeat(12, 1fr); /* csslint allow: known-properties, grid-template-columns */
  }

}
/* csslint ignore:end */