Custom 12 Grid using CSS Grid

For a while i have been using frameworks for their easy grid systems, like foundation and bootstrap. I guess this is a bit lazy and very bloated as you are loading the full css library and using about 10% of it for the grid and some smaller components.

I have been learning how to use css grid a bit lately and it seems fairly simple to replicate a 12 grid with it for fairly minimal css. here is my test so far.

Demo

CSS


/*
@import url('https://fonts.googleapis.com/css?family=Quicksand:400,700&display=swap');
* {
  font-family: 'Quicksand', sans-serif;
}
*/
* {
  box-sizing: border-box; 
  transition: all 0.2s;
  scroll-behavior: smooth;
}
.wrap {
  max-width:1200px;
  margin:0 auto;
  width:100%;
}
.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-column-gap: 3px;
  grid-row-gap: 3px;
}
.mb-10px {
  margin-bottom:10px;
}
.w-1 { grid-column: span 1; }
.w-2 { grid-column: span 2; }
.w-3 { grid-column: span 3; }
.w-4 { grid-column: span 4; }
.w-5 { grid-column: span 5; }
.w-6 { grid-column: span 6; }
.w-7 { grid-column: span 7; }
.w-8 { grid-column: span 8; }
.w-9 { grid-column: span 9; }
.w-10 { grid-column: span 10; }
.w-11 { grid-column: span 11; }
.w-12 { grid-column: span 12; }

@media(max-width:1000px) {
  .colx {
    grid-column: span 12;
  }
}


.test-box:hover {
  background:linear-gradient(#777,#444);
}
.test-box {
  background:linear-gradient(#999,#666);
  border-radius:3px;
  padding:5px;
  color:#FFF;
  text-shadow:0px 1px 2px #000;
}

HTML

<div class='wrap mb-10px'>
  <div class='grid'>
    <div class='colx w-1'>
      <div class='test-box'>w-1</div>
    </div>
    <div class='colx w-1'>
      <div class='test-box'>w-1</div>
    </div>
    <div class='colx w-1'>
      <div class='test-box'>w-1</div>
    </div>
    <div class='colx w-1'>
      <div class='test-box'>w-1</div>
    </div>
    <div class='colx w-1'>
      <div class='test-box'>w-1</div>
    </div>
    <div class='colx w-1'>
      <div class='test-box'>w-1</div>
    </div>
    <div class='colx w-1'>
      <div class='test-box'>w-1</div>
    </div>
    <div class='colx w-1'>
      <div class='test-box'>w-1</div>
    </div>
    <div class='colx w-1'>
      <div class='test-box'>w-1</div>
    </div>
    <div class='colx w-1'>
      <div class='test-box'>w-1</div>
    </div>
    <div class='colx w-1'>
      <div class='test-box'>w-1</div>
    </div>
    <div class='colx w-1'>
      <div class='test-box'>w-1</div>
    </div>
  </div>
</div>

<div class='wrap mb-10px'>
  <div class='grid'>
    <div class='colx w-2'>
      <div class='test-box'>w-2</div>
    </div>
    <div class='colx w-2'>
      <div class='test-box'>w-2</div>
    </div>
    <div class='colx w-2'>
      <div class='test-box'>w-2</div>
    </div>
    <div class='colx w-2'>
      <div class='test-box'>w-2</div>
    </div>
    <div class='colx w-2'>
      <div class='test-box'>w-2</div>
    </div>
    <div class='colx w-2'>
      <div class='test-box'>w-2</div>
    </div>
  </div>
</div>

<div class='wrap mb-10px'>
  <div class='grid'>
    <div class='colx w-3'>
      <div class='test-box'>w-3</div>
    </div>
    <div class='colx w-3'>
      <div class='test-box'>w-3</div>
    </div>
    <div class='colx w-3'>
      <div class='test-box'>w-3</div>
    </div>
    <div class='colx w-3'>
      <div class='test-box'>w-3</div>
    </div>
  </div>
</div>

<div class='wrap mb-10px'>
  <div class='grid'>
    <div class='colx w-4'>
      <div class='test-box'>w-4</div>
    </div>
    <div class='colx w-4'>
      <div class='test-box'>w-4</div>
    </div>
    <div class='colx w-4'>
      <div class='test-box'>w-4</div>
    </div>
  </div>
</div>

<div class='wrap mb-10px'>
  <div class='grid'>
    <div class='colx w-5'>
      <div class='test-box'>w-5</div>
    </div>
    <div class='colx w-5'>
      <div class='test-box'>w-5</div>
    </div>
    <div class='colx w-2'>
      <div class='test-box'>w-2</div>
    </div>
  </div>
</div>

<div class='wrap mb-10px'>
  <div class='grid'>
    <div class='colx w-6'>
      <div class='test-box'>w-6</div>
    </div>
    <div class='colx w-6'>
      <div class='test-box'>w-6</div>
    </div>
  </div>
</div>

<div class='wrap mb-10px'>
  <div class='grid'>
    <div class='colx w-7'>
      <div class='test-box'>w-7</div>
    </div>
    <div class='colx w-5'>
      <div class='test-box'>w-5</div>
    </div>
  </div>
</div>

<div class='wrap mb-10px'>
  <div class='grid'>
    <div class='colx w-8'>
      <div class='test-box'>w-8</div>
    </div>
    <div class='colx w-4'>
      <div class='test-box'>w-4</div>
    </div>
  </div>
</div>

<div class='wrap mb-10px'>
  <div class='grid'>
    <div class='colx w-9'>
      <div class='test-box'>w-9</div>
    </div>
    <div class='colx w-3'>
      <div class='test-box'>w-3</div>
    </div>
  </div>
</div>

<div class='wrap mb-10px'>
  <div class='grid'>
    <div class='colx w-10'>
      <div class='test-box'>w-10</div>
    </div>
    <div class='colx w-2'>
      <div class='test-box'>w-2</div>
    </div>
  </div>
</div>

<div class='wrap mb-10px'>
  <div class='grid'>
    <div class='colx w-11'>
      <div class='test-box'>w-11</div>
    </div>
    <div class='colx w-1'>
      <div class='test-box'>w-1</div>
    </div>
  </div>
</div>

<div class='wrap mb-10px'>
  <div class='grid'>
    <div class='colx w-12'>
      <div class='test-box'>w-12</div>
    </div>
  </div>
</div>

Working Result

w-1
w-1
w-1
w-1
w-1
w-1
w-1
w-1
w-1
w-1
w-1
w-1
w-2
w-2
w-2
w-2
w-2
w-2
w-3
w-3
w-3
w-3
w-4
w-4
w-4
w-5
w-5
w-2
w-6
w-6
w-7
w-5
w-8
w-4
w-9
w-3
w-10
w-2
w-11
w-1
w-12

External Link for Custom 12 Grid using CSS Grid

Other Items in css

Welcome

This is my test area for webdev. I keep a collection of code snippits here, mostly for my reference. Also if i find a good site, i usually add it here.

❤👩‍💻🕹