simple-responsive-css-grid

A Simple Responsive CSS Grid

by bersling

HTML

<link rel="stylesheet" href="https://unpkg.com/tb-grid@0.0.2/tb-grid.css">
<div class="main">
  <div class="tb-grid tb-grid-gap-15">

    <div class="tile tb-grid-sm-6 tb-grid-lg-4">
      <div class="title">
        Garbage Truck
      </div>
      <div class="tb-grid">
        <img class="image tb-grid-lg-6" src="https://live.staticflickr.com/3283/2724469765_a1df9f3c8c_b.jpg" alt="">
        <div class="description tb-grid-lg-6">
          Garbage trucks are very important for society!
        </div>
      </div>
    </div>


    <div class="tile tb-grid-sm-6 tb-grid-lg-4">
      <div class="title">
        Fire Truck
      </div>
      <div class="tb-grid">
        <img class="image tb-grid-lg-6" src="https://live.staticflickr.com/8645/16500240799_47ff9dbedd_b.jpg" alt="">
        <div class="description tb-grid-lg-6">
          Fire trucks are essential when there is a fire.
        </div>
      </div>
    </div>


    <div class="tile tb-grid-sm-6 tb-grid-lg-4">
      <div class="title">
        Police car
      </div>
      <div class="tb-grid">
        <img class="image tb-grid-lg-6" src="https://images-na.ssl-images-amazon.com/images/I/71QAtGHDBvL._AC_SL1500_.jpg" alt="">
        <div class="description tb-grid-lg-6">
          The police sometimes helps you.
        </div>
      </div>
    </div>


  </div>
</div>

SCSS

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

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

html, body {
  font-family: 'Open Sans', sans-serif;
  margin: 0;
    background: #3d3f4a;
}

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

.main {
  max-width: 1200px;
  padding: 20px;
  margin: 0 auto;
}

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

.tile {
  padding: 20px;
  background: white;
  border-radius: 10px;
  .image {
    max-height: 80px;
    max-width: 100%;
  }
  .title {
    font-weight: bold;
    margin-bottom: 10px;
  }
  .description {
    display: flex;
    align-items: center;
    font-style: italic;
  }
}