<h1>Bootstrap with grid layout</h1>
<p>This is an example project - the goal is to replicate bootstrap layout system using css grids.</p>
<h2>All in one</h2>
<div class="container debug-red">
  container
</div>
<h2>Fluid</h2>
<div class="container-fluid debug-green">
  container fluid
</div>
<h2>Responsive</h2>
<div class="container-sm debug-blue">100% wide until small breakpoint</div>
<div class="container-md debug-blue">100% wide until medium breakpoint</div>
<div class="container-lg debug-blue">100% wide until large breakpoint</div>
<div class="container-xl debug-blue">100% wide until extra large breakpoint</div>
<h2>Grid Layout</h2>
<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>
<h2>Auto layout columns</h2>
<div class="container">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      2 of 3
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>
<h2>Equal width multi-line</h2>
<h4>(Isn't possible with CSS grids and auto flows - you need to split the line)</h4>
<div class="container">
  <div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
  <div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
</div>

<h2>Setting one column width</h2>
<div class="container">
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-6">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-5">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>
<h2>Variable width content</h2>
<div class="container">
  <div class="row justify-content-md-center">
    <div class="col col-lg-2">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
</div>
<h2>Responsive classes</h2>
<div class="container">
  <div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
  <div class="row">
    <div class="col-8">col-8</div>
    <div class="col-4">col-4</div>
  </div>
</div>
<h2>Stacked horizontal</h2>
<div class="container">
  <div class="row">
    <div class="col-sm-8">col-sm-8</div>
    <div class="col-sm-4">col-sm-4</div>
  </div>
  <div class="row">
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
  </div>
</div>
<h2>Mix and match</h2>
<div class="container">
  <!-- Stack the columns on mobile by making one full-width and the other half-width -->
  <div class="row">
    <div class="col-md-8">.col-md-8</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

  <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
  <div class="row">
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

  <!-- Columns are always 50% wide, on mobile and desktop -->
  <div class="row">
    <div class="col-6">.col-6</div>
    <div class="col-6">.col-6</div>
  </div>
</div>

<h2>Row columns</h2>
<b>row-cols-2</b>
<div class="container">
  <div class="row row-cols-2">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>
<b>row-cols-3</b>
<div class="container">
  <div class="row row-cols-3 row-cols-sm-2">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>
/* BOOTSTRAP TO SCSS */
/* Part 1 - Variables and Mixins */

$breakpoints: (
  "xl": 1200px,
  "lg": 992px,
  "md": 768px,
  "sm": 576px,
);
$fullWidthByBreakpoints: (
  "sm": (
    "md",
    "lg",
    "xl"
  ),
  "md": (
    "lg",
    "xl"
  ),
  "lg": "xl"
);
$containers: (
  "sm": 540px,
  "md": 720px,
  "lg": 960px,
  "xl": 1140px,
  "fluid": 100%
);
$containerWidthByBreakpoint: (
  "sm": 100%,
  "md": 540px,
  "lg": 720px,
  "xl": 1140px
);

$alignments: center, flex-start, flex-end;

@mixin container($size) {
  width: map_get($containers, $size);
}

/* Part 2-a - containers media queries */
@each $breakpointName, $breakpoint in $breakpoints {
  @media screen and (min-width: $breakpoint) {
    /* containers */
    .container-#{$breakpointName} {
      width: 100%;
    }
    @each $fullWidth in map_get($fullWidthByBreakpoints, $breakpointName) {
      @if $fullWidth {
        .container-#{$fullWidth} {
          width: 100%;
        }
      }
    }
    @each $containerWidth
      in map_get($containerWidthByBreakpoint, $breakpointName)
    {
      @if $containerWidth {
        .container {
          max-width: $containerWidth;
        }
      }
    }
  }
}
/* Part 2-b containers default max-width */
@each $breakpointName, $breakpoint in $breakpoints {
  .container-#{$breakpointName} {
    max-width: map-get($containers, $breakpointName);
  }
}

/* Part 3 - grid system */
.row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(calc(100% / 12), 1fr));
  width: 100%;
  @for $i from 1 to 13 {
    .col-#{$i} {
      grid-column: span $i;
    }
    &.row-cols-#{$i} {
      grid-template-columns: repeat(auto-fit, minmax(calc(100% / #{$i}), 1fr));
    }
  }
  @each $breakpointName, $breakpoint in $breakpoints {
    @media screen and (min-width: $breakpoint) {
      @for $i from 1 to 13 {
        .col-#{$breakpointName}-#{$i} {
          grid-column: span $i;
        }
        &.row-cols-#{$breakpointName}-#{$i} {
          grid-template-columns: repeat(
            auto-fit,
            minmax(calc(100% / #{$i}), 1fr)
          );
        }
      }
    }
  }
}
@each $align in $alignments {
  .justify-content-#{$align} {
    justify-content: $align;
    grid-auto-flow: column;
    grid-template-columns: repeat(12, max-content);
  }
}
@each $breakpointName, $breakpoint in $breakpoints {
  @media screen and (min-width: $breakpoint) {
    @each $align in $alignments {
      .justify-content-#{$breakpointName}-#{$align} {
        justify-content: $align;
        grid-auto-flow: column;
        grid-template-columns: repeat(12, max-content);
      }
    }
  }
}

/* Part 4 - mq non related styles */
@for $i from 1 to 11 {
  .w-#{$i * 10} {
    width: calc(#{$i * 10}%);
  }
}
.col-md-auto {
  flex-grow: 1;
  flex-shrink: 0;
}
.container-fluid {
  width: 100%;
}
.container {
  max-width: 1140px;
}

/* Part 0 - non related to this project styles */
@import url("https://fonts.googleapis.com/css?family=Roboto+Mono:300,400,500,700&display=swap");
$debugColors: (
  "red": red,
  "green": green,
  "orange": orange,
  "blue": blue
);
html {
  margin: 0;
  &.media-sm {
    width: 540px;
    margin: 0 auto;
  }
  &.media-md {
    width: 720px;
    margin: 0 auto;
  }
  &.media-lg {
    width: 960px;
    margin: 0 auto;
  }
  &.media-xl {
    width: 1140px;
    margin: 0 auto;
  }

  &.media-full {
    width: 100%;
    margin: 0;
  }
}
body {
  padding: 2rem 2rem 5rem 2rem;
  margin: 0;
  width: calc(100% - 4rem);
  height: 100%;
  font-family: "Roboto Mono", monospace;
  overflow-x: hidden;

  h2 {
    margin: 1rem 0;
    margin: 0 auto;

    b {
      color: red;
    }
  }

  [class^="col"] {
    background: rgba(black, 0.1);
    padding: 0.25rem;
    box-shadow: 0 0 0 1px rgba(black, 0.1) inset;
  }
}
@each $debugColor, $color in $debugColors {
  .debug-#{$debugColor} {
    box-shadow: 0 0 0 1px #{$color} inset;
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.