grid-layout.css

Same filename in this branch
  1. 8.x-1.x paragraphs_collection/modules/paragraphs_collection_demo/css/grid-layout.css
  2. 8.x-1.x paragraphs_collection/modules/paragraphs_collection_test/css/grid-layout.css
.paragraphs-behavior-grid-layout-row,
.paragraphs-behavior-grid-layout-row > .field__items {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.paragraphs-behavior-grid-layout-col-4 {
  -webkit-flex: 0 1 33.33333%;
      -ms-flex: 0 1 33.33333%;
          flex: 0 1 33.33333%;
}

.paragraphs-behavior-grid-layout-col-8 {
  -webkit-flex: 0 1 66.66667%;
      -ms-flex: 0 1 66.66667%;
          flex: 0 1 66.66667%;
}

File

paragraphs_collection/modules/paragraphs_collection_test/css/grid-layout.css
View source
  1. .paragraphs-behavior-grid-layout-row,

  2. .paragraphs-behavior-grid-layout-row > .field__items {

  3.   display: -webkit-flex;

  4.   display: -ms-flexbox;

  5.   display: flex;

  6.   -webkit-flex-wrap: wrap;

  7.       -ms-flex-wrap: wrap;

  8.           flex-wrap: wrap;

  9.   -webkit-justify-content: space-between;

  10.       -ms-flex-pack: justify;

  11.           justify-content: space-between;

  12. }

  13. 

  14. .paragraphs-behavior-grid-layout-col-4 {

  15.   -webkit-flex: 0 1 33.33333%;

  16.       -ms-flex: 0 1 33.33333%;

  17.           flex: 0 1 33.33333%;

  18. }

  19. 

  20. .paragraphs-behavior-grid-layout-col-8 {

  21.   -webkit-flex: 0 1 66.66667%;

  22.       -ms-flex: 0 1 66.66667%;

  23.           flex: 0 1 66.66667%;

  24. }