Web Toolkit

image/svg+xml GitHub

Grid: Responsive Alt 

<div class="Grid Grid--withGutter u-padding-all-l">
    <div class="Grid-cell u-sizeFull u-md-size1of2 u-lg-size1of4">
        <div class="u-background-50 u-color-white u-margin-bottom-l u-borderRadius-m u-padding-all-m">1/4 responsive</div>
    </div>
    <div class="Grid-cell u-sizeFull u-md-size1of2 u-lg-size1of4">
        <div class="u-background-50 u-color-white u-margin-bottom-l u-borderRadius-m u-padding-all-m">1/4 responsive</div>
    </div>
    <div class="Grid-cell u-sizeFull u-md-size1of2 u-lg-size1of4">
        <div class="u-background-50 u-color-white u-margin-bottom-l u-borderRadius-m u-padding-all-m">1/4 responsive</div>
    </div>
    <div class="Grid-cell u-sizeFull u-md-size1of2 u-lg-size1of4">
        <div class="u-background-50 u-color-white u-margin-bottom-l u-borderRadius-m u-padding-all-m">1/4 responsive</div>
    </div>
</div>
  • Content: 
    /** @define Grid; */

.Grid--withGutterM {
  margin: 0 -var(--Grid-gutter-size);
}

.Grid--withGutterM > .Grid-cell {
  padding: 0 calc(var(--Grid-gutter-size));
}

.Grid--withGutterL {
  margin: 0 calc(-1.5 * var(--Grid-gutter-size));
}

.Grid--withGutterL > .Grid-cell {
  padding: 0 calc(1.5 * var(--Grid-gutter-size));
}
  • URL: /components/raw/grid/index.css
  • Filesystem Path: src/components/grid/index.css
  • Size: 325 Bytes

There are no notes for this item.