How to customize grid layouts with colSpan on Shipixen

intermediate 8 min read Updated 2026-03-18

Quick Answer

Customize grid layouts with colSpan on Shipixen by accessing the Grid component settings and adjusting column span values for individual grid items. Use the visual grid editor to set responsive breakpoints and ensure proper alignment across different screen sizes.

Get ShipixenPartner

Try Shipixen Full Shipixen Review

Prerequisites

Basic understanding of CSS Grid
Active Shipixen project
Familiarity with Shipixen's component system
Knowledge of responsive design principles

Step-by-Step Instructions

Access the Grid Component

Navigate to your Shipixen dashboard and open your project. Click on Components in the sidebar, then select Layout Components. Choose the Grid component from the available options or add it to your page by clicking Add Component.

You can also drag and drop the Grid component directly onto your page canvas for faster setup.

Configure Grid Container Settings

In the Grid component settings panel, set your base grid structure by defining the number of columns. Use the Grid Columns dropdown to select values like grid-cols-12 for a 12-column layout. Enable Responsive Grid to customize layouts for different breakpoints including mobile, tablet, and desktop views.

A 12-column grid provides the most flexibility for complex layouts with varying colSpan requirements.

Add Grid Items

Click Add Grid Item to insert content blocks within your grid. Each grid item can contain text, images, buttons, or other components. Use the Content Type selector to choose what type of content each grid item will display.

Set Column Span Values

Select a grid item and navigate to the Layout tab in the properties panel. Use the Column Span slider or input field to set how many columns the item should occupy. Choose from values like col-span-1 through col-span-12 depending on your grid configuration.

Use larger colSpan values (like col-span-6 or col-span-8) for hero sections or featured content.

Configure Responsive Breakpoints

In the Responsive Settings section, set different colSpan values for each screen size. Click on Mobile, Tablet, and Desktop tabs to customize the column span for each breakpoint. Use classes like md:col-span-6 for medium screens and lg:col-span-4 for large screens.

Start with mobile-first design by setting the smallest colSpan values for mobile, then increase for larger screens.

Adjust Grid Gaps and Alignment

Fine-tune your grid layout by adjusting the Grid Gap slider to control spacing between items. Set horizontal and vertical alignment using the Justify Items and Align Items dropdowns. Choose from options like justify-center, align-start, or align-stretch.

Preview and Test Responsiveness

Use Shipixen's built-in Preview Mode to test your grid layout across different screen sizes. Click the Responsive Preview icons in the toolbar to switch between mobile, tablet, and desktop views. Make adjustments to colSpan values as needed to ensure optimal display on all devices.

Test your grid layout with different content lengths to ensure it maintains proper alignment and readability.

Apply Custom Styling and Publish

Add custom CSS classes or inline styles in the Advanced section if needed. Once satisfied with your grid layout, click Save Changes and then Publish to make your customized grid live. Use the Export Code option if you need to implement the grid in external projects.

Save your grid configuration as a template for reuse across multiple pages or projects.

Common Issues & Troubleshooting

Grid items are overlapping or not aligning properly

Check that your total colSpan values don't exceed the grid column count. Ensure you've set grid-cols-X where X matches your intended layout structure.

Responsive breakpoints not working as expected

Verify that responsive classes are properly applied using the format sm:col-span-X, md:col-span-X, lg:col-span-X. Clear browser cache and test in incognito mode.

Grid layout breaks on mobile devices

Set appropriate mobile colSpan values, typically col-span-12 for full width on small screens. Use Mobile First approach in the responsive settings panel.

Custom colSpan values not saving

Ensure you're clicking Apply Changes after modifying colSpan settings. Check that your Shipixen project has proper write permissions and try refreshing the editor interface.

Prices mentioned in this guide are pulled from current plan data and may change. Always verify on the official Shipixen website before purchasing.

Visit Shipixen View Shipixen Pricing