0.0.5 • Published 7 years ago
freeze-css-columns v0.0.5
Freeze CSS Multi-column Layouts
In CSS Multi-column Layouts, the content is balanced between columns. There are situations where this is not ideal, i.e. when having an expandable element inside. This library will freeze the initial state, preventing a reflow when the column content changes.
How it works
The script finds the first items in every column and applies break-before: column
to them. If the browser does not support this property (looking at you, Firefox) or does crazy things with it (looking at you, IE), a margin-top
fallback is used. In IE, the script needs to compensate this margin-top
by adding a negative margin-bottom
to the element.
Demo: https://backflip.github.io/freeze-css-columns/test/
Install
npm install --save css-freeze-columns
Usage
Require module:
import FreezeCssColumns from 'css-freeze-columns'
# Alternative: Add transpiled script to HTML: <script src="dist/es5.js"></script>
Freeze columns:
const target = document.querySelector('.columns'),
columnFreezer = new FreezeCssColumns(target)
columnFreezer.engage()
Handle resize:
const target = document.querySelector('.columns'),
columnFreezer = new FreezeCssColumns(target)
// Initial freeze
columnFreezer.engage()
// Let columns reflow on resize and freeze again
window.addEventListener('resize', () => {
columnFreezer.update()
}, false)
Disable freezing:
const target = document.querySelector('.columns'),
columnFreezer = new FreezeCssColumns(target)
columnFreezer.engage()
// Disable
columnFreezer.disengage()