Syntax¶

Description: row is defined as a grid utility that creates a row-based grid for the element or elements it is applied to.

Arguments:

• <fraction> String | Number
  • Required argument
  • Sets the height of the element relative to its parent container
• <gutter> String | Literal
  • Default: 30px
  • Sets the gap between rows through margin-bottom
• <flex> Boolean
  • Default: true
  • If row should use flexbox

// longhand
ctr('<#selector>', {
  grid: {
    row: {
      fraction: '<string>' | '<number>'
      gutter: '<string>' | 30px
      flex: '<boolean>' | true
    }
  }
})

# longhand
<#selector>:
  grid:
    row:
      fraction: <string> | <number>
      gutter: <string> | 30px
      flex: <boolean> | true

// shorthand
ctr('<#selector>', {
  grid: {
    row: '<fraction>' '<gutter>' '<flex>'
  }
})

# shorthand
<#selector>:
  grid:
    row: [<fraction>, <gutter>, <flex>]

Notes

• You can use the default keyword to use the default value
• It is of critical importance that your parent element is a flexbox container, or if you are not using flexbox, the clearfix is applied to the parent element
• Both flex and non-flex examples should yield the same display results
• Lost Row

Fraction¶

Description: The value for fraction sets the height of the element relative to its parent container, or in other terms, how many rows the element will span.

ctr('.test', {
  grid: {
    row: {
      fraction: '1/3'
      gutter: 0.75vh
    }
  }
})

.test:
  grid:
    row:
      fraction: 1/3
      gutter: 0.75vh

.test {
  width: 100%;
  flex: 0 0 auto;
  margin-bottom: 0.75vh;
  height: calc(99.9% * 1 / 3 - (0.75vh - 0.75vh * 1 / 3));
}
.test:last-child {
  margin-bottom: 0;
}

ctr('.test', {
  grid: {
    row: {
      fraction: '1/3'
      gutter: 0.75vh
    }
  }
})

.test {
  width: 100%;
  flex: 0 0 auto;
  margin-bottom: 0.75vh;
  height: calc(99.9% * 1 / 3 - (0.75vh - 0.75vh * 1 / 3));
}
.test:last-child {
  margin-bottom: 0;
}

.test:
  grid:
    row:
      fraction: 1/3
      gutter: 0.75vh

// shorthand
ctr('.test', {
  grid: {
    // fraction gutter flex
    row: '1/5' 0.75vh
  }
})

# shorthand
.test:
  grid:
    # fraction gutter flex
    row: [1/5, 0.75vh]

.test {
  width: 100%;
  flex: 0 0 auto;
  margin-bottom: 0.75vh;
  height: calc(99.9% * 1 / 5 - (0.75vh - 0.75vh * 1 / 5));
}
.test:last-child {
  margin-bottom: 0;
}

// shorthand
ctr('.test', {
  grid: {
    // fraction gutter flex
    row: '1/5' 0.75vh
  }
})

.test {
  width: 100%;
  flex: 0 0 auto;
  margin-bottom: 0.75vh;
  height: calc(99.9% * 1 / 5 - (0.75vh - 0.75vh * 1 / 5));
}
.test:last-child {
  margin-bottom: 0;
}

# shorthand
.test:
  grid:
    # fraction gutter flex
    row: [1/5, 0.75vh]

Gutter¶

Description: The value for gutter sets the gap between elements in a row through margin-bottom: <gutter> except for the last-child.

ctr('.test', {
  grid: {
    // fraction gutter flex
    row: {
      fraction: '1/3'
      gutter: 10px
    }
  }
})

.test:
  grid:
    # fraction gutter flex
    row:
      fraction: 1/3
      gutter: 10px

.test {
  width: 100%;
  flex: 0 0 auto;
  margin-bottom: 10px;
  height: calc(99.9% * 1 / 3 - (10px - 10px * 1 / 3));
}
.test:last-child {
  margin-bottom: 0;
}

ctr('.test', {
  grid: {
    // fraction gutter flex
    row: {
      fraction: '1/3'
      gutter: 10px
    }
  }
})

.test {
  width: 100%;
  flex: 0 0 auto;
  margin-bottom: 10px;
  height: calc(99.9% * 1 / 3 - (10px - 10px * 1 / 3));
}
.test:last-child {
  margin-bottom: 0;
}

.test:
  grid:
    # fraction gutter flex
    row:
      fraction: 1/3
      gutter: 10px

// shorthand
ctr('.test', {
  grid: {
    // no gutter
    // fraction gutter flex
    row: '1/3' '0'
  }
})

# shorthand
.test:
  grid:
    # no gutter
    # fraction gutter flex
    row: [1/3, 0]

.test {
  width: 100%;
  flex: 0 0 auto;
  margin-bottom: 0;
  height: calc(99.9% * 1 / 3);
}
.test:last-child {
  margin-bottom: 0;
}

// shorthand
ctr('.test', {
  grid: {
    // no gutter
    // fraction gutter flex
    row: '1/3' '0'
  }
})

.test {
  width: 100%;
  flex: 0 0 auto;
  margin-bottom: 0;
  height: calc(99.9% * 1 / 3);
}
.test:last-child {
  margin-bottom: 0;
}

# shorthand
.test:
  grid:
    # no gutter
    # fraction gutter flex
    row: [1/3, 0]

None

• Default: 30px
• A gutter of 0 equals no gutter at all

Non Flexbox¶

Description: The value of false can be set on the flex property to not use flexbox.

ctr('.test', {
  grid: {
    row: {
      fraction: '1/3'
      flex: false
    }
  }
})

.test:
  grid:
    row:
      fraction: 1/3
      flex: false

.test {
  width: 100%;
  margin-bottom: 30px;
  height: calc(99.9% * 1 / 3 - (30px - 30px * 1 / 3));
}
.test:last-child {
  margin-bottom: 0;
}

ctr('.test', {
  grid: {
    row: {
      fraction: '1/3'
      flex: false
    }
  }
})

.test {
  width: 100%;
  margin-bottom: 30px;
  height: calc(99.9% * 1 / 3 - (30px - 30px * 1 / 3));
}
.test:last-child {
  margin-bottom: 0;
}

.test:
  grid:
    row:
      fraction: 1/3
      flex: false

Notes

• Default: true