FlexGridify 2024
FlexGridify is a responsive flex layout library that dynamically adjusts column count and spacing
for flexible, adaptive designs. Use the resize button in the bottom left corner to drive.
Documentation
Opens GitHub Docs
Reset
Clears localStorage
Check to apply changes dynamically
as you type and press `Enter`. Uncheck
to reload the page for each change.
as you type and press `Enter`. Uncheck
to reload the page for each change.
Enable this option to prioritize localStorage
over URL query parameters. If you change options
from the query, they will be reset on reload.
Use this to ensure localStorage takes precedence.
over URL query parameters. If you change options
from the query, they will be reset on reload.
Use this to ensure localStorage takes precedence.
String Type
Specifies the unit of measurement (`px` or `em`) for `gap`, `marginTop`, and
`marginBottom`.
Sets an element to observe for media queries (columnBreakpoints), defaults to the main
screen (`window`).
Sets an element to observe the drag and drop event listeners, defaults to the child
(`flexGridify-item` which is "default").
Number Type
Defines the space between elements within FlexGridify.
Sets the top margin for each element within FlexGridify.
Sets the bottom margin for each element within FlexGridify.
Specifies the default number of columns if no `columnBreakpoints` match or `responsive`
is
set to false.
JSON Type
Defines media queries and corresponding column counts for FlexGridify, influenced by
`breakpointSelector` and `enableResponsiveLayout`.
Defines animation properties for drag-and-drop functionality.
Function Type
Triggers a callback function every time `columnBreakpoints` (media query) is matched.
Triggers a callback function when an element is dropped.
Triggers a callback function when an element's dragging is started.
Boolean Type
Disables `columnBreakpoints` (media queries).
Enables drag-and-drop (DND) functionality.
Saves the position of elements when their order changes.
Automatically adjusts the height when child elements change size within FlexGridify.
Addresses the
FOUC
(Flash of Unstyled Content) problem.
Logs breakpoints to the console when resizing FlexGridify, if set to true.
Width x Height:
-
Breakpoint:
-
Column Amount:
-
Font-size:
-
1
Remember the Sabbath day, and keep it holy. Six days you shall labor and do all your work.
But the seventh day is a sabbath to the Lord your God; you shall not do any work
15
I put the Bible verses here, because I believe God wanted me that
anyone who sees this library would see them.