Skip to main content

Grid

The Grid Widget helps you create sections with multiple columns. You can place different content in each column (like text, images, buttons) and make your page look clean, organized, and responsive.

🔰 What is Grid Widget?​

The Grid Widget is like a container that holds columns. Each column can have different content.

For example:

  • You can split your page into 2 or 3 columns
  • In each column, you can add Text, Images, Buttons, etc.

✅ When to Use It?​

  • To show text and image side by side
  • To create a 3-column feature section
  • To display team members, services, or product boxes

🚀 How to Use Grid Widget (Step-by-Step)​

Step 1: Add a Grid Widget​

  1. Go to your Astroid Layout Builder
  2. Click Add Widget
  3. Choose Grid from the list

Step 2: Add Items to the Grid​

  • Click “Add Item” inside the Grid
  • You can add 2, 3, or more items

Step 3: Add Content into Each Item​

  1. Click inside a item
  2. Click “Add Widget”
  3. Add Text, Image, Button, or anything else

Step 4: Save and Check Your Page​

  • Click Save in the Layout Builder
  • Open your website to see the new layout

🎛️ Extra Settings (Optional)​

OptionWhat it does
Custom ClassAdd custom CSS styling
Responsive SettingsSet different column sizes for mobile/tablet/desktop
Padding/MarginAdd space inside or around the columns

🖼 Example Layouts​

  • ✅ Two-column layout: Image | Text
  • ✅ Three features: Icon + Title + Description
  • ✅ Team members: Photo + Name + Role

💡 Tips for Beginners​

  • Start with 2 or 3 items to keep it simple
  • Use the Preview button to check how it looks
  • On small screens (like phones), columns will stack automatically

🎯 Summary​

The Grid Widget is a powerful tool to make your content look great by arranging it in columns. It's easy to use and works well on all devices.

✨ Try it now and give your site a modern look without touching any code!