layout-builder-fourcol-section.pcss.css

Same filename in other branches
  1. 9 core/themes/olivero/css/layout/layout-builder-fourcol-section.pcss.css
  2. 10 core/themes/olivero/css/layout/layout-builder-fourcol-section.pcss.css
/*
 * @file
 * Provides the layout styles for four-column layout section.
 */

@import "../base/media-queries.pcss.css";

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

/* Two column layout. */
@media (--md) {
  .layout--fourcol-section {
    --layout-fourcol-grid: repeat(2, minmax(0, 1fr));
  }
}

/* Four column layout. */
@media (--lg) {
  .layout--fourcol-section {
    --layout-fourcol-grid: repeat(4, minmax(0, 1fr));
  }
}

File

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

View source 
  1. /*

  2.  * @file

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

  4.  */

  5. 

  6. @import "../base/media-queries.pcss.css";

  7. 

  8. .layout--fourcol-section {

  9.   display: grid;

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

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

  12. }

  13. 

  14. /* Two column layout. */

  15. @media (--md) {

  16.   .layout--fourcol-section {

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

  18.   }

  19. }

  20. 

  21. /* Four column layout. */

  22. @media (--lg) {

  23.   .layout--fourcol-section {

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

  25.   }

  26. }

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