Info¶

The LostGrid supports masonry plugins like Isotope, however, to accommodate this support, the margins need to be reconfigured. Instead of applying margin-right to everything, a margin is applied to both sides. The two special grid properties to make this magic happen are masonry-wrap and masonry-column, which are designed to be used in tandem.

Wrap Syntax¶

Description: masonry-wrap is defined as a grid utility that creates a masonry wrap around masonry columns to align the columns to the container wrapper.

Arguments:

• <gutter> String | Literal
  • Default: 30px
  • Sets the gap offset to align the child columns through margin-right and margin-left
• <flex> Boolean
  • Default: true
  • If column should use flexbox

Example

// longhand
ctr('<#selector>', {
  grid: {
    masonry-wrap: {
      gutter: '<string>' | 30px
      flex: '<boolean>' | true
    }
  }
})

# longhand
<#selector>:
  grid:
    masonry-wrap:
      gutter: <string> | 30px
      flex: <boolean> | true

// shorthand
ctr('<#selector>', {
  grid: {
    masonry-wrap: '<gutter>' '<flex>'
  }
})

# shorthand
<#selector>:
  grid:
    masonry-wrap: [<gutter>, <flex>]

Notes

• You can use the default keyword to use the default value
• Both flex and non-flex examples should yield the same display results
• Lost Masonry Support

Column Syntax¶

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

Arguments:

• <fraction> String | Number
  • Required argument.
  • Sets the width of the element relative to its parent container.
• <gutter> String | Literal
  • Default: 30px
  • Sets the gap between elements in a column through margin-right and margin-left.
• <flex> Boolean
  • Default: true
  • If column should use flexbox.

Example

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

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

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

# shorthand
<#selector>:
  grid:
    masonry-column: [<fraction>, <gutter>, <flex>]

Notes

• You can use the default keyword to use the default value
• Both flex and non-flex examples should yield the same display results
• Lost Masonry Support

Example¶

Description: A simple example per the LostGrid documentation.

<section>
  <div>1</div>
  <div>2</div>
  <div>3</div>
</section>

ctr('section', {
  grid: {
    masonry-wrap: 60px
  }
  component-div: {
    grid: {
      masonry-column: '1/3' 60px
    }
  }
})

section:
  grid:
    masonry-wrap: 60px
  component-div:
    grid:
      masonry-column: [1/3, 60px]

section {
  display: flex;
  margin-left: -30px;
  flex-flow: row wrap;
  margin-right: -30px;
}
section > div {
  flex: 0 0 auto;
  margin-left: 30px;
  margin-right: 30px;
  width: calc(99.9% * 1 / 3 - 60px);
}

ctr('section', {
  grid: {
    masonry-wrap: 60px
  }
  component-div: {
    grid: {
      masonry-column: '1/3' 60px
    }
  }
})

section {
  display: flex;
  margin-left: -30px;
  flex-flow: row wrap;
  margin-right: -30px;
}
section > div {
  flex: 0 0 auto;
  margin-left: 30px;
  margin-right: 30px;
  width: calc(99.9% * 1 / 3 - 60px);
}

section:
  grid:
    masonry-wrap: 60px
  component-div:
    grid:
      masonry-column: [1/3, 60px]