Grid

Grid Item col-3

Grid Item col-3

Grid Item col-6

Grid Item col-12

Grid Item col-6

Grid Item col-6

Grid System

The Grid Container and Grid Item blocks allow you to build responsive grid layouts by combining flexible column settings with containerized structure.

---

Grid Container Block

Block Metadata

• Title: Grid Container
• Icon: Row
• Category: Layout
• Description: A container block for grid items
• Keywords: grid, layout, container

Attributes

Attribute Name	Type	Default	Description
spacer	string	medium	Controls vertical spacing for the block.
colorName	string	white	Background color of the container.

Allowed Blocks

• basetheme/grid-item

Default Template

The Grid Container block provides a default template with two grid-item blocks:

[['basetheme/grid-item'], ['basetheme/grid-item']];

Settings Panels

Spacer Settings

Option	Value
None	""
Extra Small	xSmall
Small	small
Medium	medium
Large	large
Extra Large	xLarge
Extra Extra Large	xxLarge

Color Settings

Color Name	Color Code
Primary	#BE2830
Secondary	#5C5C5B
Black	#000000
White	#FFFFFF
Gray	#ADB5BD

Edit Component

function EditComponent(props) {
    const { attributes, setAttributes } = props;

    const bgColor = getBgColorClass(attributes.colorName);

    const blockProps = useBlockProps({ className: 'grid-row-wrapper' });

    const allowedBlocks = ['basetheme/grid-item'];
    const template = [['basetheme/grid-item'], ['basetheme/grid-item']];

    const innerBlocksProps = useInnerBlocksProps(
        { className: 'grid-row', style: { display: 'flex', flexWrap: 'wrap', alignItems: 'flex-start' } },
        { allowedBlocks, template, templateLock: false }
    );

    return (
        <>
            <InspectorControls>
                <SpacerSettings title="Container Settings" attributes={attributes} setAttributes={setAttributes} />
                <ColorSettings title="Color Settings" attributes={attributes} setAttributes={setAttributes} />
            </InspectorControls>
            <div className={\`my-4 \${bgColor}\`}>
                <div className={spacerClass(attributes.spacer)}>
                    <div className="border border-light p-2">
                        <div className="container">
                            <div {...blockProps}>
                                <div {...innerBlocksProps} />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </>
    );
}

Save Component

function SaveComponent() {
    return <InnerBlocks.Content />;
}

---

Grid Item Block

Block Metadata

• Title: Grid Item
• Icon: Layout
• Category: Layout
• Parent: basetheme/grid-container
• Description: A grid column block
• Keywords: column, item, responsive

Attributes

Attribute Name	Type	Default	Description
columnsWdith	string	1/2	Controls column width.

Allowed Blocks

• basetheme/text
• basetheme/heading
• basetheme/image
• core/list
• basetheme/button
• contact-form-7/contact-form-selector
• basetheme/card
• basetheme/person
• basetheme/google-maps

Edit Component

function EditComponent(props) {
    const { attributes, setAttributes } = props;

    const allowedBlocks = [...];

    return (
        <>
            <InspectorControls>
                <PanelBody title="Container Row Settings">
                    <PanelRow>
                        <SelectControl
                            label="Columns Width"
                            value={attributes.columnsWdith}
                            options={[{ label: '1/2', value: '1/2' }, ...]}
                            onChange={(columnsWdith) => setAttributes({ columnsWdith })}
                        />
                    </PanelRow>
                </PanelBody>
            </InspectorControls>
            <div className={\`grid-item-\${attributes.columnsWdith}\`}>
                <div className="border border-light p-2">
                    <InnerBlocks allowedBlocks={allowedBlocks} renderAppender={InnerBlocks.ButtonBlockAppender} />
                </div>
            </div>
        </>
    );
}

Save Component

function SaveComponent() {
    return <InnerBlocks.Content />;
}

---

Frontend Rendering (PHP)

Grid Container PHP

<section class="bs-grid-container grid-container <?php echo $bgColor; ?> <?php echo $spacer; ?>">
    <div class="container">
        <div class="row row-gap-4">
            <?php echo $content; ?>
        </div>
    </div>
</section>

Grid Item PHP

<div class="<?php echo $columnsClass; ?>">
    <?php echo $content; ?>
</div>

---

For further details, refer to the WordPress Block Editor documentation.