Grid

Responsive grid based on bootstrap 4’s grid.

The main customization is that instead of infix modifiers for responsive breakpoints, we switch to suffix modifiers. For example, .col-md-4 becomes .col-4-md.

Read bootstrap 4 grid docs for more detail.

<div>
    <div class="container">
        <p><strong>Responsive:</strong> add multiple classes with responsive suffixes to change column widths depending on breakpoint.</p>
        <div class="row">
            <div class="col-4 col-2-md">
                <div class="grid-example-content">.col-4.col-2-md</div>
            </div>
            <div class="col-4 col-8-md">
                <div class="grid-example-content">Resize me! I’m wider when the screen is wider.
                    <br/>.col-4.col-8-md</div>
            </div>
            <div class="col-4 col-2-md">
                <div class="grid-example-content">.col-4.col-2-md</div>
            </div>
        </div>
        <hr/>
        <p><strong>Offsets</strong>
        </p>
        <div class="row">
            <div class="col-6 offset-3">
                <div class="grid-example-content">.col-6.offset-3</div>
            </div>
        </div>
        <hr/>
        <p><strong>Custom gutter spacing</strong>: customize gutter widths by adding <code>.no-gutters</code> to your <code>.row</code> class, and then using <code>.px*</code> padding helpers on the<code>.col-*</code> classes.</p>
        <p>You’ll also need to add a corresponding negative <code>.mxn*</code> margin class on the<code>.row</code> to get rid of the extra padding on the sides.</p>
        <div class="row no-gutters mxn1">
            <div class="col-4 px1">
                <div class="grid-example-content">.col-4.px1</div>
            </div>
            <div class="col-4 px1">
                <div class="grid-example-content">.col-4.px1</div>
            </div>
            <div class="col-4 px1">
                <div class="grid-example-content">.col-4.px1</div>
            </div>
        </div>
    </div>
</div>
import * as React from 'react';

function GridExamples() {
  return (
    <div>
      <div className="container">
        <p>
          <strong>Responsive:</strong> add multiple classes with responsive
          suffixes to change column widths depending on breakpoint.
        </p>

        <div className="row">
          <div className="col-4 col-2-md">
            <div className="grid-example-content">.col-4.col-2-md</div>
          </div>
          <div className="col-4 col-8-md">
            <div className="grid-example-content">
              Resize me! I’m wider when the screen is wider.<br />.col-4.col-8-md
            </div>
          </div>
          <div className="col-4 col-2-md">
            <div className="grid-example-content">.col-4.col-2-md</div>
          </div>
        </div>

        <hr />

        <p>
          <strong>Offsets</strong>
        </p>

        <div className="row">
          <div className="col-6 offset-3">
            <div className="grid-example-content">.col-6.offset-3</div>
          </div>
        </div>

        <hr />

        <p>
          <strong>Custom gutter spacing</strong>: customize gutter widths by
          adding <code>.no-gutters</code> to your <code>.row</code> class, and
          then using <code>.px*</code> padding helpers on the
          <code>.col-*</code> classes.
        </p>
        <p>
          You’ll also need to add a corresponding negative <code>.mxn*</code>{' '}
          margin class on the
          <code>.row</code> to get rid of the extra padding on the sides.
        </p>

        <div className="row no-gutters mxn1">
          <div className="col-4 px1">
            <div className="grid-example-content">.col-4.px1</div>
          </div>
          <div className="col-4 px1">
            <div className="grid-example-content">.col-4.px1</div>
          </div>
          <div className="col-4 px1">
            <div className="grid-example-content">.col-4.px1</div>
          </div>
        </div>
      </div>
    </div>
  );
}

export default GridExamples;
/* No context defined for this component. */
  • Content:
    // Grid based on bootstrap4 grid
    //
    // Based on:
    // https://github.com/twbs/bootstrap/blob/v4.0.0-alpha.6/scss/_grid.scss
    //
    // scss-lint:disable PropertySortOrder, SpaceAfterPropertyColon
    
    // Based on:
    // https://github.com/twbs/bootstrap/blob/v4.0.0-alpha.6/scss/mixins/_grid-framework.scss
    @import 'grid/grid-framework';
    
    // Based on:
    // https://github.com/twbs/bootstrap/blob/v4.0.0-alpha.6/scss/mixins/_grid.scss
    @import 'grid/grid';
    
    
    // Container widths
    //
    // Set the container width, and override it for fixed navbars in media queries.
    
    @if $enable-grid-classes {
      .container {
        @include make-container();
        @include make-container-max-widths();
      }
    }
    
    // Fluid container
    //
    // Utilizes the mixin meant for fixed width containers, but without any defined
    // width for fluid, full width layouts.
    
    @if $enable-grid-classes {
      .container-fluid {
        @include make-container();
      }
    }
    
    // Row
    //
    // Rows contain and clear the floats of your columns.
    
    @if $enable-grid-classes {
      .row {
        @include make-row();
      }
    
      // Remove the negative margin from default .row, then the horizontal padding
      // from all immediate children columns (to prevent runaway style inheritance).
      .no-gutters {
        margin-right: 0;
        margin-left: 0;
    
        > .col,
        > [class*="col-"] {
          padding-right: 0;
          padding-left: 0;
        }
      }
    }
    
    // Columns
    //
    // Common styles for small and large grid columns
    
    @if $enable-grid-classes {
      @include make-grid-columns();
    }
    
  • URL: /components/raw/grid/_grid.scss
  • Filesystem Path: library/utilities/grid/_grid.scss
  • Size: 1.5 KB