Custom Bootstrap Grid

The grid used in the ACME site is a custom version of the Bootstrap grid.

The grid sizes are set in the global _variables.scss file.

The grid and breakpoint widths are set so that the grid is always on a 24px horizontal and 24px vertical grid. The .debug-grid class is used to make sure all content is aligned to the horizontal and vertical grid.

Bootstrap Grid

<div class="container debug-grid">
  <div class="row">
    <div class="col-1">
      <div class="spacer"></div>
    </div>
    <div class="col-1">
      <div class="spacer"></div>
    </div>
    <div class="col-1">
      <div class="spacer"></div>
    </div>
    <div class="col-1">
      <div class="spacer"></div>
    </div>
    <div class="col-1">
      <div class="spacer"></div>
    </div>
    <div class="col-1">
      <div class="spacer"></div>
    </div>
    <div class="col-1">
      <div class="spacer"></div>
    </div>
    <div class="col-1">
      <div class="spacer"></div>
    </div>
    <div class="col-1">
      <div class="spacer"></div>
    </div>
    <div class="col-1">
      <div class="spacer"></div>
    </div>
    <div class="col-1">
      <div class="spacer"></div>
    </div>
    <div class="col-1">
      <div class="spacer"></div>
    </div>
  </div>
  <div class="row">
    <div class="col-6">
      <div class="spacer"></div>
    </div>
    <div class="col-6">
      <div class="spacer"></div>
    </div>
  </div>
  <div class="row">
    <div class="col-4">
      <div class="spacer"></div>
    </div>
    <div class="col-4">
      <div class="spacer"></div>
    </div>
    <div class="col-4">
      <div class="spacer"></div>
    </div>
  </div>
  <div class="row">
    <div class="col-3">
      <div class="spacer"></div>
    </div>
    <div class="col-3">
      <div class="spacer"></div>
    </div>
    <div class="col-3">
      <div class="spacer"></div>
    </div>
    <div class="col-3">
      <div class="spacer"></div>
    </div>
  </div>
  <div class="row">
    <div class="col-2">
      <div class="spacer"></div>
    </div>
    <div class="col-2">
      <div class="spacer"></div>
    </div>
    <div class="col-2">
      <div class="spacer"></div>
    </div>
    <div class="col-2">
      <div class="spacer"></div>
    </div>
    <div class="col-2">
      <div class="spacer"></div>
    </div>
    <div class="col-2">
      <div class="spacer"></div>
    </div>
  </div>
</div>
<style>
  .debug-grid {
    padding-top: 48px;
    padding-bottom: 48px;
  }
  .spacer {
    background: coral;
    height: 48px;
  }
  .row+.row {
    margin-top: 48px;
  }
</style>

// comments are variables pulled from Bootstrap variables;
// change the values before importing the Boostrap SCSS, so our grid will be custom;

// Grid breakpoints
//
// Define the minimum dimensions at which your layout will change,
// adapting to different screen sizes, for use in media queries.

$grid-breakpoints: (
  xs: 0,
  sm: $page__width--sm,
  md: $page__width--md,
  lg: $page__width--lg,
  xl: $page__width--xl
) !default;

// Grid containers
//
// Define the maximum width of `.container` for different screen sizes.

$container-max-widths: (
  sm: $container__width--sm,
  md: $container__width--md,
  lg: $container__width--lg,
  xl: $container__width--xl
) !default;

// Grid columns
//
// Set the number of columns and specify the width of the gutters.

$grid-columns: 12 !default;
$grid-gutter-width: 24px !default;

// prevent the mobile view from growing wider than the SM container;
// it's a small window between the widths and the breakpoint;
// without this max-width, the user will see the container width get smaller as the window gets bigger;
.container {
  max-width: #{map-get($container-max-widths, 'sm')};
}

@import 'bootstrap/scss/bootstrap-grid';
@import 'bootstrap/scss/utilities/_display';

.debug-grid {
  // add a horizontal & vertical grid to align all the content;
  &::before {
    content: '';
    display: block;
    background-size: $line-height__medium $line-height__medium;
    background-image: linear-gradient(to bottom, lightblue 1px, transparent 1px),
      linear-gradient(to right, lightblue 1px, transparent 1px);
    background-position: 50% 0;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: -1;
  }
}