mistergraphx
11/17/2014 - 10:09 AM

Generated by SassMeister.com.

Generated by SassMeister.com.

<div class="container">
    <img src="http://lorempixel.com/400/200" />
</div>
/* # 

A thumbnail or block list, with rounded borders


*/
ul.rounded-grid {
  /* Target the first box in the first row */
  /* Target the last box in the first row in the last column */
  /* Target the first box in the last row */
  /* Target the last box in the last row in the last column */
  /* Feel free to change parameters here */
  line-height: 10em;
  width: auto; }
  ul.rounded-grid li {
    float: left;
    width: 25%; }
  ul.rounded-grid li:first-child {
    border-top-left-radius: 1em; }
  ul.rounded-grid li:nth-child(4) {
    border-top-right-radius: 1em; }
  ul.rounded-grid li:nth-child(4n+1):nth-last-child(1) {
    border-bottom-left-radius: 1em; }
  ul.rounded-grid li:nth-child(4n+1):nth-last-child(2) {
    border-bottom-left-radius: 1em; }
  ul.rounded-grid li:nth-child(4n+1):nth-last-child(3) {
    border-bottom-left-radius: 1em; }
  ul.rounded-grid li:nth-child(4n+1):nth-last-child(4) {
    border-bottom-left-radius: 1em; }
  ul.rounded-grid li:nth-child(4n+4):last-child {
    border-bottom-right-radius: 1em; }

.rounded-grid li {
  box-sizing: border-box;
  border: 1px solid white;
  list-style: none;
  color: white;
  background: #268bd2;
  text-align: center;
  overflow: hidden; }
  .rounded-grid li img {
    width: 100%;
    height: auto;
    display: block; }
// ----
// libsass (v3.0.1)
// ----

/* # Vertical-align

Use it to verticaly align an element, in a container

Source
:   <http://www.developerdrive.com/2014/11/15-essential-sass-mixins/>

@mixin vertical-align - verticaly align an element, in a container

Styleguide libs.mixins.positionning.vertical-align
*/
$autoprefixer: true !default;

@mixin vertical-align {
    position: relative;
    top: 50%;
    @if $autoprefixer == false {
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
    }
    transform: translateY(-50%);
}


.container {
  box-sizing: border-box;
  width: 600px;
  height: 600px;
  border: 1px solid silver
  .item-aligned{
      // @include vertical-align();
  }
  
}
<div class="container">
    <img src="http://lorempixel.com/400/200" />
</div>