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:

// 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

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.

Edit
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
Edit
// 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]
Child
Child
Child
Child
Child
Child

Gutter

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

Edit
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
Edit
// 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

Non Flexbox

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

Edit
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