A tiny, modern, responsive, 12-column grid system built using CSS Grid Layout

A tiny, modern, responsive, 12-column grid system built using CSS Grid Layout Demo

View Demo Full Screen View Demo New Tab

A tiny, modern, responsive, 12-column grid system built using CSS Grid Layout Code

HTML

<h1>
    <code>tb-grid</code>: Simple Responsive CSS Grid
</h1>
<div class="tb-grid tb-grid-gap-20">
    <div class="item tb-grid-sm-6 tb-grid-md-9">
    </div>
    <div class="item tb-grid-sm-6 tb-grid-md-3">
    </div>
    <div class="item tb-grid-sm-4 tb-grid-lg-10 tb-grid-xs-6">
    </div>
    <div class="item tb-grid-sm-8 tb-grid-lg-2 tb-grid-xs-6">
    </div>
    <div class="item tb-grid-sm-5 tb-grid-lg-4 tb-grid-xs-8">
    </div>
    <div class="item tb-grid-sm-7 tb-grid-lg-8 tb-grid-xs-4">
    </div>
</div>

<h2>
    Grid in grid 🤔
</h2>
<div class="tb-grid tb-grid-gap-10">
    <div class="item tb-grid-sm-6">
        <div class="tb-grid tb-grid-gap-17">
            <div class="inner-item tb-grid-sm-6 tb-grid-xs-8">
            </div>
            <div class="inner-item tb-grid-sm-6 tb-grid-xs-4">
            </div>
        </div>
    </div>
    <div class="item tb-grid-sm-6">
        <div class="tb-grid tb-grid-gap-5">
            <div class="inner-item tb-grid-sm-8 tb-grid-md-3 tb-grid-xs-2">
            </div>
            <div class="inner-item tb-grid-sm-4 tb-grid-md-9 tb-grid-xs-6">
            </div>
            <div class="inner-item tb-grid-sm-4 tb-grid-md-9 tb-grid-xs-4">
            </div>
            <div class="inner-item tb-grid-sm-8 tb-grid-md-3">
            </div>
        </div>
    </div>
    <div class="item tb-grid-sm-4">
        <div class="tb-grid tb-grid-gap-20">
            <div class="inner-item tb-grid-sm-8 tb-grid-md-3 tb-grid-xs-10">
            </div>
            <div class="inner-item tb-grid-sm-4 tb-grid-md-9 tb-grid-xs-8">
            </div>
            <div class="inner-item tb-grid-sm-4 tb-grid-md-9 tb-grid-xs-6">
            </div>
            <div class="inner-item tb-grid-sm-8 tb-grid-md-3 tb-grid-xs-3">
            </div>
        </div>
    </div>
    <div class="item tb-grid-sm-8 tb-grid tb-grid-gap-5">
        <div class="inner-item tb-grid-xs-1">
        </div>
        <div class="inner-item tb-grid-xs-1">
        </div>
        <div class="inner-item tb-grid-xs-1">
        </div>
        <div class="inner-item tb-grid-xs-1">
        </div>
        <div class="inner-item tb-grid-xs-1">
        </div>
        <div class="inner-item tb-grid-xs-1">
        </div>
        <div class="inner-item tb-grid-xs-1">
        </div>
        <div class="inner-item tb-grid-xs-1">
        </div>
        <div class="inner-item tb-grid-xs-1">
        </div>
        <div class="inner-item tb-grid-xs-1">
        </div>
        <div class="inner-item tb-grid-xs-1">
        </div>
        <div class="inner-item tb-grid-xs-1">
        </div>
    </div>
</div>

<h2>
    No gutters
</h2>
<div class="tb-grid">
    <div class="tb-grid-sm-8 tb-grid-md-4 block color-1">
    </div>
    <div class="tb-grid-sm-4 tb-grid-md-4 block color-2">
    </div>
    <div class="tb-grid-sm-12 tb-grid-md-4 block color-3">
    </div>
</div>

<h2>
    Indent
</h2>
<div class="tb-grid tb-grid-gap-10">
    <div class="tb-grid-xs-2"></div>
    <div class="tb-grid-xs-8 block color-1">
    </div>
    <div class="tb-grid-xs-2"></div>
    <div class="tb-grid-xs-3 tb-grid-md-1"></div>
    <div class="tb-grid-xs-3 tb-grid-md-5 block color-2">
    </div>
    <div class="tb-grid-xs-3 tb-grid-md-5 block color-2">
    </div>
    <div class="tb-grid-xs-3 tb-grid-md-1"></div>
</div>

CSS

.tb-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}
.tb-grid.tb-grid-gap-1 {
  row-gap: 1px;
  column-gap: min(1px, 8%);
}
.tb-grid.tb-grid-gap-2 {
  row-gap: 2px;
  column-gap: min(2px, 8%);
}
.tb-grid.tb-grid-gap-3 {
  row-gap: 3px;
  column-gap: min(3px, 8%);
}
.tb-grid.tb-grid-gap-4 {
  row-gap: 4px;
  column-gap: min(4px, 8%);
}
.tb-grid.tb-grid-gap-5 {
  row-gap: 5px;
  column-gap: min(5px, 8%);
}
.tb-grid.tb-grid-gap-6 {
  row-gap: 6px;
  column-gap: min(6px, 8%);
}
.tb-grid.tb-grid-gap-7 {
  row-gap: 7px;
  column-gap: min(7px, 8%);
}
.tb-grid.tb-grid-gap-8 {
  row-gap: 8px;
  column-gap: min(8px, 8%);
}
.tb-grid.tb-grid-gap-9 {
  row-gap: 9px;
  column-gap: min(9px, 8%);
}
.tb-grid.tb-grid-gap-10 {
  row-gap: 10px;
  column-gap: min(10px, 8%);
}
.tb-grid.tb-grid-gap-11 {
  row-gap: 11px;
  column-gap: min(11px, 8%);
}
.tb-grid.tb-grid-gap-12 {
  row-gap: 12px;
  column-gap: min(12px, 8%);
}
.tb-grid.tb-grid-gap-13 {
  row-gap: 13px;
  column-gap: min(13px, 8%);
}
.tb-grid.tb-grid-gap-14 {
  row-gap: 14px;
  column-gap: min(14px, 8%);
}
.tb-grid.tb-grid-gap-15 {
  row-gap: 15px;
  column-gap: min(15px, 8%);
}
.tb-grid.tb-grid-gap-16 {
  row-gap: 16px;
  column-gap: min(16px, 8%);
}
.tb-grid.tb-grid-gap-17 {
  row-gap: 17px;
  column-gap: min(17px, 8%);
}
.tb-grid.tb-grid-gap-18 {
  row-gap: 18px;
  column-gap: min(18px, 8%);
}
.tb-grid.tb-grid-gap-19 {
  row-gap: 19px;
  column-gap: min(19px, 8%);
}
.tb-grid.tb-grid-gap-20 {
  row-gap: 20px;
  column-gap: min(20px, 8%);
}
.tb-grid.tb-grid-gap-21 {
  row-gap: 21px;
  column-gap: min(21px, 8%);
}
.tb-grid.tb-grid-gap-22 {
  row-gap: 22px;
  column-gap: min(22px, 8%);
}
.tb-grid.tb-grid-gap-23 {
  row-gap: 23px;
  column-gap: min(23px, 8%);
}
.tb-grid.tb-grid-gap-24 {
  row-gap: 24px;
  column-gap: min(24px, 8%);
}
.tb-grid.tb-grid-gap-25 {
  row-gap: 25px;
  column-gap: min(25px, 8%);
}
.tb-grid.tb-grid-gap-26 {
  row-gap: 26px;
  column-gap: min(26px, 8%);
}
.tb-grid.tb-grid-gap-27 {
  row-gap: 27px;
  column-gap: min(27px, 8%);
}
.tb-grid.tb-grid-gap-28 {
  row-gap: 28px;
  column-gap: min(28px, 8%);
}
.tb-grid.tb-grid-gap-29 {
  row-gap: 29px;
  column-gap: min(29px, 8%);
}
.tb-grid.tb-grid-gap-30 {
  row-gap: 30px;
  column-gap: min(30px, 8%);
}
.tb-grid.tb-grid-gap-31 {
  row-gap: 31px;
  column-gap: min(31px, 8%);
}
.tb-grid.tb-grid-gap-32 {
  row-gap: 32px;
  column-gap: min(32px, 8%);
}
.tb-grid.tb-grid-gap-33 {
  row-gap: 33px;
  column-gap: min(33px, 8%);
}
.tb-grid.tb-grid-gap-34 {
  row-gap: 34px;
  column-gap: min(34px, 8%);
}
.tb-grid.tb-grid-gap-35 {
  row-gap: 35px;
  column-gap: min(35px, 8%);
}
.tb-grid.tb-grid-gap-36 {
  row-gap: 36px;
  column-gap: min(36px, 8%);
}
.tb-grid.tb-grid-gap-37 {
  row-gap: 37px;
  column-gap: min(37px, 8%);
}
.tb-grid.tb-grid-gap-38 {
  row-gap: 38px;
  column-gap: min(38px, 8%);
}
.tb-grid.tb-grid-gap-39 {
  row-gap: 39px;
  column-gap: min(39px, 8%);
}
.tb-grid.tb-grid-gap-40 {
  row-gap: 40px;
  column-gap: min(40px, 8%);
}
.tb-grid.tb-grid-gap-41 {
  row-gap: 41px;
  column-gap: min(41px, 8%);
}
.tb-grid.tb-grid-gap-42 {
  row-gap: 42px;
  column-gap: min(42px, 8%);
}
.tb-grid.tb-grid-gap-43 {
  row-gap: 43px;
  column-gap: min(43px, 8%);
}
.tb-grid.tb-grid-gap-44 {
  row-gap: 44px;
  column-gap: min(44px, 8%);
}
.tb-grid.tb-grid-gap-45 {
  row-gap: 45px;
  column-gap: min(45px, 8%);
}
.tb-grid.tb-grid-gap-46 {
  row-gap: 46px;
  column-gap: min(46px, 8%);
}
.tb-grid.tb-grid-gap-47 {
  row-gap: 47px;
  column-gap: min(47px, 8%);
}
.tb-grid.tb-grid-gap-48 {
  row-gap: 48px;
  column-gap: min(48px, 8%);
}
.tb-grid.tb-grid-gap-49 {
  row-gap: 49px;
  column-gap: min(49px, 8%);
}
.tb-grid.tb-grid-gap-50 {
  row-gap: 50px;
  column-gap: min(50px, 8%);
}
.tb-grid > * {
  grid-column-start: span 12;
}
@media (min-width: 0) {
  .tb-grid .tb-grid-xs-1 {
    grid-column-start: span 1;
  }
  .tb-grid .tb-grid-xs-2 {
    grid-column-start: span 2;
  }
  .tb-grid .tb-grid-xs-3 {
    grid-column-start: span 3;
  }
  .tb-grid .tb-grid-xs-4 {
    grid-column-start: span 4;
  }
  .tb-grid .tb-grid-xs-5 {
    grid-column-start: span 5;
  }
  .tb-grid .tb-grid-xs-6 {
    grid-column-start: span 6;
  }
  .tb-grid .tb-grid-xs-7 {
    grid-column-start: span 7;
  }
  .tb-grid .tb-grid-xs-8 {
    grid-column-start: span 8;
  }
  .tb-grid .tb-grid-xs-9 {
    grid-column-start: span 9;
  }
  .tb-grid .tb-grid-xs-10 {
    grid-column-start: span 10;
  }
  .tb-grid .tb-grid-xs-11 {
    grid-column-start: span 11;
  }
  .tb-grid .tb-grid-xs-12 {
    grid-column-start: span 12;
  }
}
@media (min-width: 576px) {
  .tb-grid .tb-grid-sm-1 {
    grid-column-start: span 1;
  }
  .tb-grid .tb-grid-sm-2 {
    grid-column-start: span 2;
  }
  .tb-grid .tb-grid-sm-3 {
    grid-column-start: span 3;
  }
  .tb-grid .tb-grid-sm-4 {
    grid-column-start: span 4;
  }
  .tb-grid .tb-grid-sm-5 {
    grid-column-start: span 5;
  }
  .tb-grid .tb-grid-sm-6 {
    grid-column-start: span 6;
  }
  .tb-grid .tb-grid-sm-7 {
    grid-column-start: span 7;
  }
  .tb-grid .tb-grid-sm-8 {
    grid-column-start: span 8;
  }
  .tb-grid .tb-grid-sm-9 {
    grid-column-start: span 9;
  }
  .tb-grid .tb-grid-sm-10 {
    grid-column-start: span 10;
  }
  .tb-grid .tb-grid-sm-11 {
    grid-column-start: span 11;
  }
  .tb-grid .tb-grid-sm-12 {
    grid-column-start: span 12;
  }
}
@media (min-width: 768px) {
  .tb-grid .tb-grid-md-1 {
    grid-column-start: span 1;
  }
  .tb-grid .tb-grid-md-2 {
    grid-column-start: span 2;
  }
  .tb-grid .tb-grid-md-3 {
    grid-column-start: span 3;
  }
  .tb-grid .tb-grid-md-4 {
    grid-column-start: span 4;
  }
  .tb-grid .tb-grid-md-5 {
    grid-column-start: span 5;
  }
  .tb-grid .tb-grid-md-6 {
    grid-column-start: span 6;
  }
  .tb-grid .tb-grid-md-7 {
    grid-column-start: span 7;
  }
  .tb-grid .tb-grid-md-8 {
    grid-column-start: span 8;
  }
  .tb-grid .tb-grid-md-9 {
    grid-column-start: span 9;
  }
  .tb-grid .tb-grid-md-10 {
    grid-column-start: span 10;
  }
  .tb-grid .tb-grid-md-11 {
    grid-column-start: span 11;
  }
  .tb-grid .tb-grid-md-12 {
    grid-column-start: span 12;
  }
}
@media (min-width: 992px) {
  .tb-grid .tb-grid-lg-1 {
    grid-column-start: span 1;
  }
  .tb-grid .tb-grid-lg-2 {
    grid-column-start: span 2;
  }
  .tb-grid .tb-grid-lg-3 {
    grid-column-start: span 3;
  }
  .tb-grid .tb-grid-lg-4 {
    grid-column-start: span 4;
  }
  .tb-grid .tb-grid-lg-5 {
    grid-column-start: span 5;
  }
  .tb-grid .tb-grid-lg-6 {
    grid-column-start: span 6;
  }
  .tb-grid .tb-grid-lg-7 {
    grid-column-start: span 7;
  }
  .tb-grid .tb-grid-lg-8 {
    grid-column-start: span 8;
  }
  .tb-grid .tb-grid-lg-9 {
    grid-column-start: span 9;
  }
  .tb-grid .tb-grid-lg-10 {
    grid-column-start: span 10;
  }
  .tb-grid .tb-grid-lg-11 {
    grid-column-start: span 11;
  }
  .tb-grid .tb-grid-lg-12 {
    grid-column-start: span 12;
  }
}
@media (min-width: 1200px) {
  .tb-grid .tb-grid-xl-1 {
    grid-column-start: span 1;
  }
  .tb-grid .tb-grid-xl-2 {
    grid-column-start: span 2;
  }
  .tb-grid .tb-grid-xl-3 {
    grid-column-start: span 3;
  }
  .tb-grid .tb-grid-xl-4 {
    grid-column-start: span 4;
  }
  .tb-grid .tb-grid-xl-5 {
    grid-column-start: span 5;
  }
  .tb-grid .tb-grid-xl-6 {
    grid-column-start: span 6;
  }
  .tb-grid .tb-grid-xl-7 {
    grid-column-start: span 7;
  }
  .tb-grid .tb-grid-xl-8 {
    grid-column-start: span 8;
  }
  .tb-grid .tb-grid-xl-9 {
    grid-column-start: span 9;
  }
  .tb-grid .tb-grid-xl-10 {
    grid-column-start: span 10;
  }
  .tb-grid .tb-grid-xl-11 {
    grid-column-start: span 11;
  }
  .tb-grid .tb-grid-xl-12 {
    grid-column-start: span 12;
  }
}
@media (min-width: 1400px) {
  .tb-grid .tb-grid-xxl-1 {
    grid-column-start: span 1;
  }
  .tb-grid .tb-grid-xxl-2 {
    grid-column-start: span 2;
  }
  .tb-grid .tb-grid-xxl-3 {
    grid-column-start: span 3;
  }
  .tb-grid .tb-grid-xxl-4 {
    grid-column-start: span 4;
  }
  .tb-grid .tb-grid-xxl-5 {
    grid-column-start: span 5;
  }
  .tb-grid .tb-grid-xxl-6 {
    grid-column-start: span 6;
  }
  .tb-grid .tb-grid-xxl-7 {
    grid-column-start: span 7;
  }
  .tb-grid .tb-grid-xxl-8 {
    grid-column-start: span 8;
  }
  .tb-grid .tb-grid-xxl-9 {
    grid-column-start: span 9;
  }
  .tb-grid .tb-grid-xxl-10 {
    grid-column-start: span 10;
  }
  .tb-grid .tb-grid-xxl-11 {
    grid-column-start: span 11;
  }
  .tb-grid .tb-grid-xxl-12 {
    grid-column-start: span 12;
  }
}

/*# sourceMappingURL=tb-grid.css.map */


@import url("https://fonts.googleapis.com/css2?family=Open+Sans&display=swap");
html {
  font-family: "Open Sans", sans-serif;
}

*, *::before, *::after {
  box-sizing: border-box;
}

.inner-item, .item {
  padding-top: 20px;
  padding-bottom: 20px;
  border-radius: 5px;
}

.item {
  min-height: 60px;
  background: #ddd;
  padding-left: 20px;
  padding-right: 20px;
}

.inner-item {
  background: #bbb;
}

.block {
  height: 60px;
}

.color-1 {
  background: #ddd;
}

.color-2 {
  background: #bbb;
}

.color-3 {
  background: #999;
}