Intermediate
How to customize grid layouts with colSpan on Shipixen
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.
Prerequisites
- Basic understanding of CSS Grid
- Active Shipixen project
- Familiarity with Shipixen's component system
- Knowledge of responsive design principles
1
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.
Tip
You can also drag and drop the Grid component directly onto your page canvas for faster setup.
2
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.Tip
A 12-column grid provides the most flexibility for complex layouts with varying colSpan requirements.
3
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.
4
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.Tip
Use larger colSpan values (like col-span-6 or col-span-8) for hero sections or featured content.
5
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.Tip
Start with mobile-first design by setting the smallest colSpan values for mobile, then increase for larger screens.
6
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.7
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.
Tip
Test your grid layout with different content lengths to ensure it maintains proper alignment and readability.
8
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.
Tip
Save your grid configuration as a template for reuse across multiple pages or projects.
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.
Ready to get started with Shipixen?
Put this tutorial into practice. Visit Shipixen and follow the steps above.
Visit Shipixen →