grid.css
Same filename in other branches
Grid system.
File
-
core/
themes/ olivero/ css/ layout/ grid.css
View source
- /*
- * DO NOT EDIT THIS FILE.
- * See the following change record for more information,
- * https://www.drupal.org/node/3084859
- * @preserve
- */
-
- /**
- * @file
- * Grid system.
- */
-
- .grid-full {
- display: -ms-grid;
- display: grid;
- -ms-grid-rows: 1fr;
- grid-template-rows: 1fr;
- -ms-grid-columns: (minmax(0, 1fr))[6];
- grid-template-columns: repeat(6, minmax(0, 1fr));
- grid-column-gap: 1.125rem;
-
- /* .grid-full classes nested 3 or more deep go full width. */
- }
-
- .grid-full .grid-full .grid-full {
- display: block;
- }
-
- @media (min-width: 43.75rem) {
-
- .grid-full {
- -ms-grid-columns: (minmax(0, 1fr))[14];
- grid-template-columns: repeat(14, minmax(0, 1fr));
- grid-column-gap: 2.25rem;
- }
- }
-
- /*
- If the .grid-full is nested within the following, apply the appropriate number of columns.
- - .layout--content-narrow class.
- - Element that's inheriting the layout--content-narrow styles from its parent region.
- */
-
- @media (min-width: 43.75rem) {
-
- .layout--content-narrow .grid-full,
- .layout--pass--content-narrow > * .grid-full {
- -ms-grid-columns: (minmax(0, 1fr))[ 12 ];
- grid-template-columns: repeat(12, minmax(0, 1fr));
- }
- }
-
- @media (min-width: 62.5rem) {
-
- .layout--content-narrow .grid-full,
- .layout--pass--content-narrow > * .grid-full {
- -ms-grid-columns: (minmax(0, 1fr))[ 8 ];
- grid-template-columns: repeat(8, minmax(0, 1fr));
- }
- }
-
- /*
- If the .grid-full is nested within the following, apply the appropriate number of columns.
- - .layout--content-medium class.
- - Element that's inheriting the layout--content-medium styles from its parent region.
- */
-
- @media (min-width: 43.75rem) {
-
- .layout--content-medium .grid-full,
- .layout--pass--content-medium > * .grid-full {
- -ms-grid-columns: (minmax(0, 1fr))[ 12 ];
- grid-template-columns: repeat(12, minmax(0, 1fr));
- }
- }
-
- @media (min-width: 62.5rem) {
-
- .layout--content-medium .grid-full,
- .layout--pass--content-medium > * .grid-full {
- -ms-grid-columns: (minmax(0, 1fr))[ 10 ];
- grid-template-columns: repeat(10, minmax(0, 1fr));
- }
- }
Buggy or inaccurate documentation? Please file an issue. Need support? Need help programming? Connect with the Drupal community.