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

• Firstly, big shout out to Cory Simmons, the maestro of CSS grids and the creator of the LostGrid
• With the ctr rewrite, various grid frameworks will become a simple plug and play operation
• Need be you could always roll out with a custom grip by using ctr classes
• A free video tutorial series was put together by Scott Tolinski on the LostGrid which you can check out at Level Up Tutorials
  • Note ctr syntax is a bit different, but the concept remains the same

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

• Regex Match: /^grid$|^grid-/i
• MDN What is grid layout?

Center¶

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

Arguments:

• <max> String | Literal
  • Default: lg media query breakpoint equals 1050px
  • Sets the max-width of the container element
  • The value of true equals the lg media query breakpoint
• <pad> String | Literal
  • Default: 30px
  • Sets the the padding on the left and right of the element
• <flex> Boolean
  • Default: 'true'

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

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

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

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

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

• Only two values 'row' or 'column'
• 'row' alias: true
• MDN flex-flow