How to Create Grid Container in WordPress?

Are you looking to create a grid container in WordPress? A grid container makes it easy to design responsive and visually appealing layouts. It gives you precise control over the placement and alignment of elements, allowing you to build complex designs effortlessly.

With the Container block from the Nexter Blocks, you can easily add a container with CSS Grid in WordPress.

To check the complete feature overview documentation of the Nexter Blocks Container block, click here.

Requirement  – This block is a part of the Nexter Blocks, make sure it’s installed & activated to enjoy all its powers.

Add the Container block and follow the steps –

1. Select Grid as the layout type of the container.

2. Then select the appropriate layout structure.

Layout

In this tab, you’ll find the same options available with the Flexbox layout.

Grid Property

From this tab, you can manage the grid layout. 

In the Columns section, you’ll find some repeater items based on the selected layout structure. Open one item.

From here, you can manage the width of the individual grid for responsive devices. Here you’ll find three options – 

• Auto – To set the width to auto.
• Min/Max – You can set a minimum and maximum width.
• Custom – You can set a custom width. 

Similarly, you can control the width of other grid items.

You can click on the + Add Columns button to add more grid items to the column.

Similarly, in the Rows section, you’ll find some repeater items based on the selected layout structure. Open one item.

From here, you can manage the height of the individual grid for responsive devices. Here you’ll find three options – 

• Auto – To set the height to auto.
• Min/Max – You can set a minimum and maximum height.
• Custom – You can set a custom height. 

Similarly, you can control the height of other grid items.

You can click on the + Add Rows button to add more grid items to the row.

Then, from the Auto Flow dropdown, you can set the grid-auto-flow direction. Here you’ll find two options – 

• Rows – This will fill the rows first and will create new rows as needed.
• Column – This will fill the columns first and will create new columns as needed.

From the Row Alignment (Align Items) section, you can align the grid items along the column axis based on CSS grid align-item properties for responsive devices. This value will apply to all grid items inside the container.

From the Justify Items section, you can align the grid items along the row axis based on CSS grid justify-item properties for responsive devices. This value will apply to all grid items inside the container.

If the total width of the grid is less than the grid container width, then from the Column Alignment (Justify Content) section, you can align the grid in the row axis within the grid container based on the CSS grid justify-content properties for responsive devices.

If the total height of the grid is less than the grid container height, then from the Align Content section, you can align the grid in the column axis within the grid container based on the CSS grid align-content properties for responsive devices.

From the Column Gap section, you can set the gap between the columns for responsive devices.

Then, from the Row Gap section, you can set the gap between the rows for responsive devices.

Extra Options

In this tab, you’ll find the same options available in the Flexbox layout.

Once you are done with the settings, you can add other blocks inside the grid items.

Add Child Grid Container

You can also add a grid container inside a grid container. To do this, add the Container block inside a grid container.

Layout

Then, from the Layout tab, select Grid as the layout type.

Note: You can also add a Flexbox container as the child container of a grid container by selecting Flex.

From the Width section, you can set the container width.

Then, from the Height section, you can set the container height.

From the Overflow section, you can set the container overflow to visible or hidden.

Then, from the HTML Tag dropdown, you can change the HTML tag of the container.

Grid Property

In this tab, you’ll find the same options available in the parent grid container.

Note: You’ll see a Flexbox Property tab if you select Flex as the layout type.

Grid Item Settings

In this tab, you’ll find some settings related to the child grid container.

From the Simple tab, you can set the column width and row height.

Then from the Advanced tab, you can change the grid item’s location within the grid using grid-column-start, grid-column-end, grid-row-start and grid-row-end properties.

From the Align Items section, you can align the grid items along the column axis based on CSS grid align-item properties for responsive devices. This value will apply to all grid items inside the container.

If the total width of the grid is less than the grid container width, then from the Justify Content section, you can align the grid in the row axis within the grid container based on the CSS grid justify-content properties for responsive devices.

Extra Options

In this tab, you’ll find the same options available in the parent grid container.

Using this, you can easily create bento grid-like complex layouts.