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:

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

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:

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

Example

Description: A simple example per the LostGrid documentation.

<section>
<div>1</div>
<div>2</div>
<div>3</div>
</section>
Edit
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]