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 columnFreezer = target columnFreezer
Handle resize:
const target = document columnFreezer = target // Initial freezecolumnFreezer // Let columns reflow on resize and freeze againwindow
Disable freezing:
const target = document columnFreezer = target columnFreezer // DisablecolumnFreezer