HIDA - Helmholtz Information and Data Science Academy

Grid: Grid zweispaltig 

<div class="grid grid--two-columns">
    <div class="grid__row">
        <div class="grid__col grid__col--1">
            <div class="grid__item">
                <div class="placeholder placeholder--default">1</div>
            </div>
        </div>
        <div class="grid__col grid__col--2">
            <div class="grid__item">
                <div class="placeholder placeholder--default">2</div>
            </div>
        </div>
    </div>
</div>
 
#{tag || 'div'}.grid(class=variant && `grid--${variant}`)&attributes(attr)
  if cols
    .grid__row(class=verticalCentered && 'grid__row--vertical-centered')
      each items, col in cols
        .grid__col(class=`grid__col--${col}`)
          each item in items
            .grid__item
              +include(`@${item.use}`, item.settings || {}, false)
 
{
  "variant": "two-columns",
  "cols": {
    "1": [
      {
        "use": "placeholder",
        "settings": {
          "text": "1"
        }
      }
    ],
    "2": [
      {
        "use": "placeholder",
        "settings": {
          "text": "2"
        }
      }
    ]
  }
}
  • Content: 
    .grid__row {
  display: flex;
  flex-direction: column;

  @include mq($from: m) {
    align-items: stretch;
    flex-direction: row;
    margin-left: -2rem;
    margin-right: -2rem;
  }
}

.grid__row--vertical-centered {
  @include mq($from: m) {
    align-items: center;
  }
}

.grid__col {
  @include mq($until: m) {
    &:not(:last-child) {
      padding-bottom: 4rem;
    }
  }

  @include mq($from: m) {
    padding: 0 2rem;
  }
}

.grid--two-columns .grid__col {
  width: 100%;

  @include mq($from: m) {
    width: 50%;
  }
}

.grid--three-columns .grid__col {
  @include mq($from: m) {
    width: 33.33333%;
  }
}

.grid .placeholder {
  padding: 3rem 0;
}
  • URL: /components/raw/grid/grid.scss
  • Filesystem Path: src/components/molecules/grid/grid.scss
  • Size: 666 Bytes

There are no notes for this item.