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
- Default:
<flex>
Boolean
- Default:
true
- If
row
should use flexbox
- Default:
// 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.
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
- 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.
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
- Default:
true