oneplusfourgrid_section.css

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

.layout--oneplusfourgrid-section {
  display: flex;
  flex-wrap: wrap;
}

.layout--oneplusfourgrid-section > .layout__region {
  flex: 0 1 100%;
}

.layout--oneplusfourgrid-section > .layout__four-grid-group {
  display: flex;
  flex-direction: column;
  gap: 0.96rem;
}

/* Large */
@media screen and (min-width: 60rem) {
  /* 960px */
  .layout--oneplusfourgrid-section {
    margin-right: -1.5%;
    margin-left: -1.5%;
  }
  .layout--oneplusfourgrid-section > .layout__region--first {
    flex: 0 1 47%;
    margin-right: 1.5%;
    margin-left: 1.5%;
  }
  .layout--oneplusfourgrid-section > .layout__four-grid-group {
    flex: 0 1 50%;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0;
  }
  .layout__four-grid-group > .layout__region--second,
  .layout__four-grid-group > .layout__region--third,
  .layout__four-grid-group > .layout__region--fourth,
  .layout__four-grid-group > .layout__region--fifth {
    flex: 0 1 44%;
    margin-right: 3%;
    margin-left: 3%;
  }
}

File

View on git.drupalcode.org

core/profiles/demo_umami/themes/umami/layouts/oneplusfourgrid_section/oneplusfourgrid_section.css

View source 
  1. /*

  2.  * @file

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

  4.  */

  5. 

  6. .layout--oneplusfourgrid-section {

  7.   display: flex;

  8.   flex-wrap: wrap;

  9. }

  10. 

  11. .layout--oneplusfourgrid-section > .layout__region {

  12.   flex: 0 1 100%;

  13. }

  14. 

  15. .layout--oneplusfourgrid-section > .layout__four-grid-group {

  16.   display: flex;

  17.   flex-direction: column;

  18.   gap: 0.96rem;

  19. }

  20. 

  21. /* Large */

  22. @media screen and (min-width: 60rem) {

  23.   /* 960px */

  24.   .layout--oneplusfourgrid-section {

  25.     margin-right: -1.5%;

  26.     margin-left: -1.5%;

  27.   }

  28.   .layout--oneplusfourgrid-section > .layout__region--first {

  29.     flex: 0 1 47%;

  30.     margin-right: 1.5%;

  31.     margin-left: 1.5%;

  32.   }

  33.   .layout--oneplusfourgrid-section > .layout__four-grid-group {

  34.     flex: 0 1 50%;

  35.     flex-direction: row;

  36.     flex-wrap: wrap;

  37.     gap: 0;

  38.   }

  39.   .layout__four-grid-group > .layout__region--second,

  40.   .layout__four-grid-group > .layout__region--third,

  41.   .layout__four-grid-group > .layout__region--fourth,

  42.   .layout__four-grid-group > .layout__region--fifth {

  43.     flex: 0 1 44%;

  44.     margin-right: 3%;

  45.     margin-left: 3%;

  46.   }

  47. }

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