zen-grids/test/fixtures/grids/zen-grid-item/output.css

Zen Grids is an intuitive, flexible grid system to create responsive, adaptive, fluid and fixed-width layouts.

/**
 * @file
 * Test zen-grid-item()
 */
#test-zen-grid-item {
  /* Test zen-grid-item(6, 4) with 12 column grid and 20px gutter */
  float: left;
  width: 50%;
  margin-left: 25%;
  margin-right: -100%;
  padding-left: 10px;
  padding-right: 10px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  /* Test zen-grid-item(6, 4) with 12 column grid and 20px gutter and $zen-box-sizing: universal-border-box */
  float: left;
  width: 50%;
  margin-left: 25%;
  margin-right: -100%;
  padding-left: 10px;
  padding-right: 10px;
  /* Test zen-grid-item(3, 3) with box-sizing: content-box, 5 column grid and 10% gutter */
  float: left;
  width: 50%;
  margin-left: 40%;
  margin-right: -100%;
  padding-left: 5%;
  padding-right: 5%;
  border-left: 0 !important;
  border-right: 0 !important;
  /* Turn off $zen-auto-include-grid-item-base */
  /* Test zen-grid-item(3, 3) with 5 column grid and 40px gutter */
  float: left;
  width: 60%;
  margin-left: 40%;
  margin-right: -100%;
  /* Test zen-grid-item(3, 3, right) with 5 column grid and 40px gutter */
  float: right;
  width: 60%;
  margin-right: 40%;
  margin-left: -100%;
  /* Test zen-grid-item(3, 3) with 5 column grid and 40px gutter and $zen-switch-direction */
  float: right;
  width: 60%;
  margin-right: 40%;
  margin-left: -100%;
  /* Test zen-grid-item(3, 3, right) with 5 column grid and 40px gutter and $zen-switch-direction */
  float: left;
  width: 60%;
  margin-left: 40%;
  margin-right: -100%;
  /* Test zen-grid-item(3, 2.5) with 5 column grid and 40px gutter */
  float: left;
  width: 60%;
  margin-left: 30%;
  margin-right: -100%;
  /* Test zen-grid-item(3, 3) with $zen-grid-width: 1000px, 5 column grid and 40px gutter */
  float: left;
  width: 600px;
  margin-left: 400px;
  margin-right: -100%;
  /* Test zen-grid-item(3, 3) with $zen-gutter-method: margin, 5 column grid and 5% gutter */
  float: left;
  width: 58%;
  margin-left: 42%;
  margin-right: -100%;
  /* Test zen-grid-item(3, 2.5) with $zen-gutter-method: margin, 5 column grid and 5% gutter */
  float: left;
  width: 58%;
  margin-left: 29%;
  margin-right: -100%;
  /* Test zen-grid-item(1, 1) with $gutters: 10px and $zen-auto-include-grid-item-base: false */
  float: left;
  width: 100%;
  margin-left: 0%;
  margin-right: -100%;
  padding-left: 5px;
  padding-right: 5px;
  /* Test zen-grid-item(1, 1) with $rtl-selector and $zen-auto-include-grid-item-base: false */
  float: left;
  width: 50%;
  margin-left: 50%;
  margin-right: -100%; }
  [dir="rtl"] #test-zen-grid-item {
    float: right;
    margin-right: 50%;
    margin-left: -100%; }