layout-builder-fourcol-section.css

/*
 * DO NOT EDIT THIS FILE.
 * See the following change record for more information,
 * https://www.drupal.org/node/3084859
 * @preserve
 */

/*
 * @file
 * Provides the layout styles for four-column layout section.
 */

.layout--fourcol-section {
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: var(--layout-fourcol-grid);
}

/* Two column layout. */

@media (min-width: 43.75rem) {
  .layout--fourcol-section {
    --layout-fourcol-grid: repeat(2, minmax(0, 1fr));
  }
}

/* Four column layout. */

@media (min-width: 62.5rem) {
  .layout--fourcol-section {
    --layout-fourcol-grid: repeat(4, minmax(0, 1fr));
  }
}

File

View on git.drupalcode.org

core/themes/olivero/css/layout/layout-builder-fourcol-section.css

View source 
  1. /*

  2.  * DO NOT EDIT THIS FILE.

  3.  * See the following change record for more information,

  4.  * https://www.drupal.org/node/3084859

  5.  * @preserve

  6.  */

  7. 

  8. /*

  9.  * @file

  10.  * Provides the layout styles for four-column layout section.

  11.  */

  12. 

  13. .layout--fourcol-section {

  14.   display: grid;

  15.   gap: var(--grid-gap);

  16.   grid-template-columns: var(--layout-fourcol-grid);

  17. }

  18. 

  19. /* Two column layout. */

  20. 

  21. @media (min-width: 43.75rem) {

  22.   .layout--fourcol-section {

  23.     --layout-fourcol-grid: repeat(2, minmax(0, 1fr));

  24.   }

  25. }

  26. 

  27. /* Four column layout. */

  28. 

  29. @media (min-width: 62.5rem) {

  30.   .layout--fourcol-section {

  31.     --layout-fourcol-grid: repeat(4, minmax(0, 1fr));

  32.   }

  33. }

Buggy or inaccurate documentation? Please file an issue. Need support? Need help programming? Connect with the Drupal community.