simple-responsive-css-grid

A Simple Responsive CSS Grid

by bersling

HTML

<div class="main">
  <div class="car-grid">
    
    <div class="tile">
      <div class="title">
        Garbate Truck
      </div>
      <div>
        <img class="image"
             src="https://live.staticflickr.com/3283/2724469765_a1df9f3c8c_b.jpg"
             alt="">
        <div class="description">
          Garbage trucks are very important for society!
        </div>
      </div>
    </div>
    
    
    <div class="tile">
      <div class="title">
        Fire Truck
      </div>
      <div>
        <img class="image"
             src="https://live.staticflickr.com/8645/16500240799_47ff9dbedd_b.jpg"
             alt="">
        <div class="description">
          Fire trucks are essential when there is a fire.
        </div>
      </div>
    </div>
    
    
    <div class="tile">
      <div class="title">
        Police car
      </div>
      <div>
        <img class="image"
             src="https://images-na.ssl-images-amazon.com/images/I/71QAtGHDBvL._AC_SL1500_.jpg"
             alt="">
        <div class="description">
          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;

.car-grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

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