JSFiddle - React, Tailwind, and code Playground

Creating grids without the need to remove margin from the first/last divs

by Jennifer Perrin

HTML

<!-- Throw in a nice looking font just for the fun of it -->
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,700,300,200"/>

<p>Grids are great. I use grids more often now but I roll my own for specific projects rather than use a framework.</p>
<p>In this example, essentially the .grids class has a negative margin on it equal to the gutter margins. This means if you have a number of items which span multiple rows you don’t need to apply multiple first/last classes to the html and it will also work as you reduce the viewport if building responsively.</p>
<p>Try resizing the browser window and you’ll see that the boxes will automatically jump to the next line and will be lined up to left side. No need to calculate first or last divs on the broswer resize.</p>

<div class="container">
    <div class="grids">
        <div class="grid-1"></div>
        <div class="grid-1"></div>
        <div class="grid-1"></div>
        <div class="grid-1"></div>
        <div class="grid-1"></div>
        <div class="grid-1"></div>
        <div class="grid-1"></div>
        <div class="grid-1"></div>
        <div class="grid-1"></div>
        <div class="grid-1"></div>
        <div class="grid-1"></div>
        <div class="grid-1"></div>
        <div class="grid-1"></div>
        <div class="grid-1"></div>
        <div class="grid-1"></div>
        <div class="grid-1"></div>
        <div class="grid-1"></div>
        <div class="grid-1"></div>
        <div class="grid-1"></div>
        <div class="grid-1"></div>
        <div class="grid-1"></div>
    </div>
</div>

CSS

body {
    font-family: 'Yanone Kaffeesatz';
    font-size: 1em;
    color: #444444;
    margin: 10px;
}

p {
    color: #444;
    margin: 0 0 10px;
    font-size: .9em;
    letter-spacing: 2px;
}

.container {
  max-width: 600px;
  width: 100%;
  padding: 10px 10px;
  margin: 0 auto;
}
.grids {
  position: relative;
  margin-left: -10px;
}
.grid-1 {
  float: left;
  width: 50px;
  height: 50px;
  margin-left: 10px;
  margin-bottom: 10px;
  background: #789b2e;
}