Info

Most grids are sub-par at best, and arguably too many developers rely on them all too often. Nevertheless, the LostGrid CSS grid stands out in a crowd of many — a true work of grid beauty. The grid itself is technical-ish, and it is based on calc and flexbox, so if support for the browser which must not be named is mission critical, you are out of luck. On the flip side, you can produce some real magic armed with this grid once you learn the ropes.

Notes

Syntax

Description: grid is defined as a grid layout based on the LostGrid.

ctr('<#selector>', {
<...>: <...>
grid: {
<grid:key>: <grid:value>
}
})
<#selector>:
<...>: <...>
grid:
<grid:key>: <grid:value>
<#selector> {
<...>: <...>;
}

Notes

Center

Description: The center Object or property creates a horizontally centered container element.

Arguments:

Syntax

// longhand syntax
ctr('<#selector>', {
grid: {
center: {
max: '<string>' | '<lg-media-query>'
pad: '<number>' | 0
flex: '<boolean>' | true
}
}
})
# longhand syntax
<#selector>:
grid:
center:
max: <string> | <lg-media-query>
pad: <number> | 0
flex: <boolean> | true
// shorthand
ctr('<#selector>', {
grid: {
center: '<max>' '<pad>' '<flex>'
}
})
# shorthand
<#selector>:
grid:
center: [<max>, <pad>, <flex>]

Example

Edit
// flexbox
ctr('.test', {
grid: {
center: 1140px 30px
}
})
# flexbox
.test:
grid:
center: [1140px, 30px]
.test {
display: flex;
max-width: 1140px;
margin-left: auto;
margin-right: auto;
padding-left: 30px;
flex-flow: row wrap;
padding-right: 30px;
}
// flexbox
ctr('.test', {
  grid: {
    center: 1140px 30px
  }
})
.test {
  display: flex;
  max-width: 1140px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 30px;
  flex-flow: row wrap;
  padding-right: 30px;
}
# flexbox
.test:
  grid:
    center: [1140px, 30px]
Edit
// non-flexbox
ctr('.test', {
grid: {
center: 1140px 30px false
}
})
# non-flexbox
.test:
grid:
center: [1140px, 30px, false]
.test {
max-width: 1140px;
margin-left: auto;
margin-right: auto;
padding-left: 30px;
padding-right: 30px;
}
.test::after {
clear: both;
content: "";
display: table;
}
// non-flexbox
ctr('.test', {
  grid: {
    center: 1140px 30px false
  }
})
.test {
  max-width: 1140px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 30px;
  padding-right: 30px;
}
.test::after {
  clear: both;
  content: "";
  display: table;
}
# non-flexbox
.test:
  grid:
    center: [1140px, 30px, false]

Flex Container

Description: The container property creates a parent flexbox container and its value defines the container’s main axis.

Edit
ctr('.test', {
width: 200px
grid: {
container: 'row'
}
})
.test:
width: 200px
grid:
container: row
.test {
width: 200px;
display: flex;
flex-flow: row wrap;
}
ctr('.test', {
  width: 200px
  grid: {
    container: 'row'
  }
})
.test {
  width: 200px;
  display: flex;
  flex-flow: row wrap;
}
.test:
  width: 200px
  grid:
    container: row
Edit
ctr('.test', {
width: 200px
grid: {
container: 'column'
}
})
.test:
width: 200px
grid:
container: column
.test {
width: 200px;
display: flex;
flex-flow: column nowrap;
}
ctr('.test', {
  width: 200px
  grid: {
    container: 'column'
  }
})
.test {
  width: 200px;
  display: flex;
  flex-flow: column nowrap;
}
.test:
  width: 200px
  grid:
    container: column

Notes