cellsByColumn
A horizontal grid layout where items are centered inside each cell. The grid is defined by columnWidth
and rowHeight
options.
Options
columnWidth
Type: Number, Element, or Selector String
The width of a column of the horizontal grid.
If set to an Element or Selector String, Isotope will use the width of that element. See Element sizing. Setting columnWidth
with element sizing is recommended if you are using percentage widths or media queries to change the size of items.
If columnWidth
is not set, the outer width of the first element will be used.
layoutMode: 'cellsByColumn',
masonry: {
columnWidth: 110,
rowHeight: 110
}
rowHeight
Type: Number, Element, or Selector String
The width of a column of the vertical grid.
If set to an Element or Selector String, Isotope will use the height of that element. See Element sizing. Setting rowHeight
with element sizing is recommended if you are using media queries to change the size of items.
If rowHeight
is not set, the outer width of the first element will be used.
layoutMode: 'cellsByColumn',
masonry: {
columnWidth: 110,
rowHeight: 110
}