Floated items in Susy with even widths, padding and borders

Question

I am running into an issue trying to float three list items so the content area of all three have equal widths, and an even amount of left/right padding next to each vertical border. The left edge of the first LI needs to butt up against the left side of the container and the right edge of the last LI needs to butt up against the container.

Gist on Sassmeister

HTML:

<ul>
  <li>
    <img src="http://placehold.it/304x120">
    <p>Lorem ipsum dolor sit amet cons ectator adipscing elit commer maladonit. Lorem ipsum dolor sit amet cons ectator adipscing elit commer maladonit. Lorem ipsum dolor sit amet cons ectator adipscing elit commer maladonit.</p>
  </li>
  <li>
    <img src="http://placehold.it/304x120">
    <p>Lorem ipsum dolor sit amet cons ectator adipscing elit commer maladonit. Lorem ipsum dolor sit amet cons ectator adipscing elit commer maladonit. Lorem ipsum dolor sit amet cons ectator adipscing elit commer maladonit.</p>
  </li>
  <li>
    <img src="http://placehold.it/304x120">
    <p>Lorem ipsum dolor sit amet cons ectator adipscing elit commer maladonit. Lorem ipsum dolor sit amet cons ectator adipscing elit commer maladonit. Lorem ipsum dolor sit amet cons ectator adipscing elit commer maladonit.</p>
  </li>
</ul>

SCSS:

// ----
// Sass (v3.3.3)
// Compass (v1.0.0.alpha.18)
// Breakpoint (v2.4.2)
// Susy (v2.1.1)
// ----

@import "breakpoint";
@import "compass";
@import "compass/reset";
@import "susy";

// Settings

$total-columns  : 12;
$c-width        : 64px;
$gutter-width   : 16px;
$grid-padding   : 8px;

$susy: (
  column-width: $c-width,
  columns: $total-columns,
  global-box-sizing: border-box,
  gutter-position: inside,
  gutters: $gutter-width / $c-width,
  debug: (
    image: show,
    output: overlay,
    toggle: top right,
  )
);

$tablet-width: 620px;
$tablet-columns: 8;

$desktop-width: 960px;
$desktop-columns: 12;

body { @include container; }

img {
  height: auto;
  max-width: 100%;
}

@include susy-breakpoint($tablet-width, $tablet-columns) {
  ul { @include clearfix; }

  li {
    @include span(3 of 6);
    border-right: 1px solid black;

    &:first-child { padding-left: 0; }

    &:last-child {
      border: 0;
      padding-right: 0;
    }
  }
}

@include susy-breakpoint($desktop-width, $desktop-columns) {
  li { @include span(4 of 12); }
}

What am I doing wrong? Any help would be greatly appreciated!

Answer 1

To clarify: you don't want equal outer widths, you want equal content widths (after removing the left/right edge padding)? You already have equal widths, but removing the edge padding means the first and last element have extra space for their content.

The math is more complex for this, because you actually need to break your grid slightly to achieve the right look. I think this will get you close:

  li {
    @include box-sizing(border-box);
    border-right: 1px solid black;

    &:first-child {
      $span: span(2 of 6) - (gutter(6)/3);
      @include span($span of 6 no-gutters);
      padding-right: gutter(6); 
    }

    &:nth-child(2) {
      $span: span(2 of 6) + (gutter(6)*2/3);
      @include span($span of 6);
    }

    &:last-child {
      $span: span(2 of 6) - (gutter(6)/3);
      @include span($span of 6 last no-gutters);
      border: 0;
      padding-left: gutter(6);
    }
  }

I'm using the span() and gutter() functions to calculate the exact widths you need (removing some gutter width from the outer elements, and adding that width to the inner), and then passing the result to the span mixin, which creates your layout.

UPDATE (for larger gutters):

I'm not entirely sure what you have tried already, but this should do it:

@include with-layout((gutters: 20px / $c-width)) {
  // your code here...
}

You can replace the 20px / $c-width with whatever fraction you like. The larger the fraction, the larger your gutters.