Skip to content
/ gridify Public

A block that allows you to set a CSS Grid layout and arrange child blocks within it.

Notifications You must be signed in to change notification settings

elpuas/gridify

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

37 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

gridify-banner-1544x500

Gridify

Description

Gridify allows you to easily create a CSS grid layout within your WordPress posts and pages. You can control the number of columns and rows, as well as the gap between grid items. You can also set responsive breakpoints to adjust the number of columns displayed on different screen sizes.

Installation

  1. Download the plugin zip file or install the plugin through the WordPress plugins screen directly.
  2. Go to the WordPress dashboard and navigate to Plugins > Add New.
  3. Click the "Upload Plugin" button and select the zip file you just downloaded.
  4. Click the "Install Now" button and activate the plugin.
  5. The block will now be available in the editor under the "Layout" category.

Screenshots

  1. To find the block in the block library, type "layout" in the search bar. Block Library

  2. Use the Gridify Item settings to arrange your blocks in a grid. Block Settings

  3. Use the Gridify block settings to easily build grids. Block Settings

  4. Use the Gridify Block settings to move items across the grid. Block Settings

  5. Use the Gridify Block settings to freely arrange items inside the block and display them seamlessly on the frontend. Block Settings

NOTE: Gridify items will always start at column and row 1. To see your grid layout in a more structured way, use the Document overview / List view option in the editor. Click the Show Grid Layout toggle to review your Grid.

Changelog

  • 2.0.0

      • Add a Toggle Control to show your grid layout.
      • Change from inline styles to set the columns and rows, to use only CSS Variables.
  • 1.0.2

      • Update Readme file.
      • Lint Css and JS.
      • Add Banner to assets folder.
  • 1.0.1

      • Update Readme files and Description.
  • 1.0.0

      • Release

About

A block that allows you to set a CSS Grid layout and arrange child blocks within it.

Resources

Stars

Watchers

Forks

Packages

No packages published