Autogrid
Autogrid is a block for the WordPress block editor that allows you to create adaptive columns. The elements inside it are automatically distributed into columns, filling the available space. The order of customization Set the maximum number of columns and their minimum width, after reaching which th
Autogrid is a block for the WordPress block editor that allows you to create adaptive columns. The elements inside it are automatically distributed into columns, filling the available space.
The order of customization
- 01Set the maximum number of columns and their minimum width, after reaching which the cells will be redistributed.
- 02Specify the size of spacing between cells and their padding. These parameters can be configured adaptively, for example by setting min. the size of the container when the value should be applied.
- 03If necessary, set the width of certain cells by specifying the number of columns they should occupy. You can specify the minimum and maximum number of columns to be displayed when the value should be applied.
- 04Done! Test.
Screenshots & previews.
What browsers are supported?
The grid works well in modern browsers: Chrome 79+, Firefox 76+, Edge 79+, Safari 16+.
Adaptability starts working only with: Chrome 106+, Firefox 110+, Edge 106+, Safari 16+.
The information is obtained based on a comparison of the support of the CSS features used: CSS Grid , CSS math function min() , CSS function repeat() , CSS Container Queries .
Are the adaptability settings working strangely?
The Min and Max values in the adaptivity settings “Spacing between cells” and “Padding of cells” are set in px and indicate the width of the Autogrid container, not the width of the viewport.
