simple-responsive-css-grid

A Simple Responsive CSS Grid

by bersling

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...

SCSS

// solve css min problem ...
@function css-function( $function, $values... ) {
	@return 
		$function
		+ unquote( '(' )
		+ $values
		+ unquote( ')' )
	;
}

@function css-min( $values... ) {
	@return css-function( min, $values );
}
// end solve css min problem ...

$tb-grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

.tb-grid {
  display: grid;

  grid-template-columns: repeat(12, 1fr);
  
  @for $i from 1 through 50 {
    &.tb-grid-gap-#{$i} {
      row-gap: #{$i}px;
      column-gap: #{css-min(#{$i}px, 8%)};
    }
  }
  
  > * {
    grid-column-start: span 12;
  }
  @each $breakpoint-name, $breakpoint-value in $tb-grid-breakpoints {    
    @media (min-width: #{$breakpoint-value}) {
      @for $i from 1 through 12 {
        .tb-grid-#{$breakpoint-name}-#{$i} {
          grid-column-start: span #{$i};
        }
      }
    }
  }
}


//===========//
// app specific styling, has nothing to do with tb-grid //
//===========//

@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');

html {
  font-family: 'Open Sans', sans-serif;
}

$color-one: #ddd;
$color-two: #bbb;
$color-three: #999;

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

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

.item {
  min-height: 60px;
  background: $color-one;
  padding-left: 20px;
  padding-right: 20px;
}

.inner-item {
  background: $color-two;
}

.block {
  height: 60px;
}

.color-1 {
  background: $color-one;
}

.color-2 {
  background: $color-two;
}

.color-3 {
  background: $color-three;
}