Left and right arrow keys navigate. Enter jumps to content.

Borders and shadows on guttered cells

Skip to navigationSkip to content

Please enable javascript to access the full functionality of this site

Site header

npm install gutter-grid --save

Tag line

A Sass flexbox based grid system that is able to replicate CSS grid-gap in IE11

Toolbar

View Gutter Grid on GitHub
Preferred system:

Body:Borders and shadows on guttered cells

The demos on this page will not display on IE8 due to IE8's lack of support for the box-shadow property.

If a grid has gaps, trying to add borders or shadows to it directly won't work

A failed attempt at adding shadows to the grid cells. The shadows are out of alignment.

Classes format

<div class="grid__wrapper">
  <div class="grid grid--cols-3 grid--gutter-20">
    <div class="grid__cell demonstrate-shadow-border"></div>
    <div class="grid__cell demonstrate-shadow-border"></div>
    <div class="grid__cell demonstrate-shadow-border"></div>
    <div class="grid__cell demonstrate-shadow-border"></div>
    <div class="grid__cell demonstrate-shadow-border"></div>
    <div class="grid__cell demonstrate-shadow-border"></div>
  </div>
</div>
Mixin format

<div class="mixin__wrapper">
  <div class="mixin-shadows-example">
    <div class="mixin__cell demonstrate-shadow-border"></div>
    <div class="mixin__cell demonstrate-shadow-border"></div>
    <div class="mixin__cell demonstrate-shadow-border"></div>
    <div class="mixin__cell demonstrate-shadow-border"></div>
    <div class="mixin__cell demonstrate-shadow-border"></div>
    <div class="mixin__cell demonstrate-shadow-border"></div>
  </div>
</div>

.mixin-bad-shadows-example {
  @include grid(3, 20px);
}

// These are not part of Gutter Grid
.mixin__wrapper { padding-bottom: 0.1px; }
.demonstrate-shadow-border.add-padding Shadow cell { box-shadow: inset 0 0 0 2px red, 0 0 10px #000; }

The reason it doesn't look right is because Gutter Grid uses invisible borders to create the gaps. When you add shadows to the grid cells, the shadows also have to wrap around the gaps.

The grid__inner technique can be used to help with this problem. Whenever you want the child element of a grid cell to take up the same dimensions as the content area of that cell, you can use grid__inner / $inners:true.

Using inner grid elements to add clean shadows to the grid cells.

Classes format
Shadow cell
Shadow cell
Shadow cell
Shadow cell
Shadow cell
Shadow cell

<div class="grid__wrapper">
  <div class="grid grid--gutter-20 grid--cols-3 grid--hasInners">
    <div class="grid__cell">
      <div class="grid__inner add-shadow add-padding">Shadow cell</div>
    </div>
    <div class="grid__cell">
      <div class="grid__inner add-shadow add-padding">Shadow cell</div>
    </div>
    <div class="grid__cell">
      <div class="grid__inner add-shadow add-padding">Shadow cell</div>
    </div>
    <div class="grid__cell">
      <div class="grid__inner add-shadow add-padding">Shadow cell</div>
    </div>
    <div class="grid__cell">
      <div class="grid__inner add-shadow add-padding">Shadow cell</div>
    </div>
    <div class="grid__cell">
      <div class="grid__inner add-shadow add-padding">Shadow cell</div>
    </div>
  </div>
</div>
Mixin format
Shadow cell
Shadow cell
Shadow cell
Shadow cell
Shadow cell
Shadow cell

<div class="mixin__wrapper">
  <div class="mixin-shadows-example">
    <div class="mixin__cell">
      <div class="mixin__inner add-shadow add-padding">Shadow cell</div>
    </div>
    <div class="mixin__cell">
      <div class="mixin__inner add-shadow add-padding">Shadow cell</div>
    </div>
    <div class="mixin__cell">
      <div class="mixin__inner add-shadow add-padding">Shadow cell</div>
    </div>
    <div class="mixin__cell">
      <div class="mixin__inner add-shadow add-padding">Shadow cell</div>
    </div>
    <div class="mixin__cell">
      <div class="mixin__inner add-shadow add-padding">Shadow cell</div>
    </div>
    <div class="mixin__cell">
      <div class="mixin__inner add-shadow add-padding">Shadow cell</div>
    </div>
  </div>
</div>

.mixin-shadows-example {
  @include grid(3, 20px, $inners: true);
}

// These are not part of Gutter Grid
.mixin__wrapper { padding-bottom: 0.1px; }
.add-shadow.add-padding Shadow cell { box-shadow: 0 0 10px #000; }

Using box shadow as a fake border

You might have noticed in the first example that I was able to add something that looked a lot like a border to each grid cell without needing to user inner elements. The secret to that is using a solid inset box-shadow.

Adding borders to each cell without having to use inner elements (doesn't work in IE8).

Classes format

You can use box-shadow to add a solid fake border to grid cells without needing to use inner elements.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Bonum incolumis acies: misera caecitas. Cur, nisi quod turpis oratio est? Atque haec coniunctio confusioque virtutum tamen a philosophis ratione quadam distinguitur. At ille pellit, qui permulcet sensum voluptate. Videamus igitur sententias eorum, tum ad verba redeamus. Duo Reges: constructio interrete. Quantum Aristoxeni ingenium consumptum videmus in musicis. 


<div class="grid__wrapper">
  <div class="grid grid--cols-2 grid--gutter-20">
    <div class="grid__cell add-fakeBorder add-padding">
      <p>You can use <code>box-shadow</code> to add a solid fake border to grid cells without needing to use inner elements.</p>
    </div>
    <div class="grid__cell add-fakeBorder add-padding">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Bonum incolumis acies: misera caecitas.
        Cur, nisi quod turpis oratio est? Atque haec coniunctio confusioque virtutum tamen a philosophis ratione quadam distinguitur.
        At ille pellit, qui permulcet sensum voluptate. Videamus igitur sententias eorum, tum ad verba redeamus.
        Duo Reges: constructio interrete. Quantum Aristoxeni ingenium consumptum videmus in musicis.
      </p>
    </div>
  </div>
</div>

//Define gutter sizes like this
$grid-cell-gutters: (
  20 : 20px,
);

@import '../node_modules/mq-scss/mq';
@import '../node_modules/gutter-grid/grid-classes';

.add-fakeBorder {
  box-shadow: inset 0 0 0 2px red;
}
Mixin format

You can use box-shadow to add a solid fake border to grid cells without needing to use inner elements.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Bonum incolumis acies: misera caecitas. Cur, nisi quod turpis oratio est? Atque haec coniunctio confusioque virtutum tamen a philosophis ratione quadam distinguitur. At ille pellit, qui permulcet sensum voluptate. Videamus igitur sententias eorum, tum ad verba redeamus. Duo Reges: constructio interrete. Quantum Aristoxeni ingenium consumptum videmus in musicis. 


<div class="mixin__wrapper">
  <div class="mixin-25B">
    <div class="mixin__cell add-fakeBorder add-padding">
      <p>You can use <code>box-shadow</code> to add a solid fake border to grid cells without needing to use inner elements.</p>
    </div>
    <div class="mixin__cell add-fakeBorder add-padding">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Bonum incolumis acies: misera caecitas.
        Cur, nisi quod turpis oratio est? Atque haec coniunctio confusioque virtutum tamen a philosophis ratione quadam distinguitur.
        At ille pellit, qui permulcet sensum voluptate. Videamus igitur sententias eorum, tum ad verba redeamus.
        Duo Reges: constructio interrete. Quantum Aristoxeni ingenium consumptum videmus in musicis.
      </p>
    </div>
  </div>
</div>

.mixin__wrapper {
  padding-bottom: 0.1px;
}

.mixin-25B {
  @include grid(2, 20px);
}

.add-fakeBorder {
  box-shadow: inset 0 0 0 2px red;
}