Align center depending on number of columns susy

Question

I am using the following style to align the columns at the center of the page using susy:

card{ 
@include span(3 of 12);
  margin: 0 auto;
  cursor: pointer;
}

But its not moving the elements (div) to center of the page by default, if I have single element it is placing it on left side and but I want that single element to be placed at the center of the page. Elements grows dynamically and they are not static.

Answer 1

The span() mixin generates a float: left; property, which keeps your item from centering. Use the function instead, to avoid unwanted output:

.card { 
  width: span(3 of 12);
  margin: 0 auto;
  cursor: pointer;
}

---

Update based on clarifying comment...

There are two ways you might be able to center/left-align based on siblings. One uses flexbox:

.container {
  display: flex;
  justify-content: center;
}

.card { 
  flex: 0 0 span(3 of 12);

  // add gutters to all but the first element
  & + & {
    margin-left: gutter(of 12);
  }
}

The other uses sibling-logic only:

.card { 
  @include span(3 of 12);
  outline: 1px dotted red;

  &:first-child:last-child {
    float: none;
    margin: 0 auto;
  }
}

The flexbox solution keeps everything centered until you've filled up the space. The floating solution only centers when there is a single .card