A grid container is an advanced tool used to build responsive websites. Grids allow you to create a container with 1–12 columns that provide a sectioned-off space where other containers can be placed.

Grids are enabled by default in such Boxmode templates as Clickart, Wearsy, Koala, Eventoristics, Gardevoir extérieur, and Applicool. Also, you’ll be able to add grids to any template, including the Blank Theme. 

Now, let’s find out how to navigate Grids and utilize this functionality in your project.

Adding Grid containers

Let’s review how to add a Grid container to your project:

  1. Click the + button in the Left panel.
  2. Go to Basic Elements, then to Markup.
  3. Drag and drop the container you need onto the canvas. The Grid container will take up the width of the canvas by default.

To add content inside a Grid container: 

  1. Go to the left panel.
  2. Select any element from Basic Elements or Widgets.
  3. Drag and drop it onto the container.
Note:

Sections cannot be inserted into containers.

When another block is dragged onto a Grids container, it will automatically snap to the row that it is hovered over. This will work identically if an element is moved inside the Grids container. Grid rows get highlighted when you drag an element to show where the block will be attached. 

Adding another block to the same row will stack the two blocks on top of each other. The Grid container will automatically adjust to its new size when a block is resized vertically. Likewise, when a container is resized horizontally, its new borders will automatically snap to the nearest row.

Note:

Grids in the container will not be visible by default. Click on the container to see the Grids.

When grids are added to a project, this will be reflected inside the CSS panel.

Drag and drop overview

When you drag the object inside the grid, it becomes 30% transparent, and its cropped thumbnail also appears next to the cursor. 

When you drag an element between two blocks of elements, these blocks are highlighted (the main block in which the drag operation takes place is also highlighted.) 

When dragging a block of cards up the container, the text with the cards is swapped. Therefore, you cannot drag and drop the complex element into the text block.

Customizing Grid containers

Clicking on a Grid container will bring out its controls and settings. The crossed arrows icon allows you to move the container on the page. 

Design

By clicking on the brush icon, you access three main settings to customize the visual parameters: a border between the widget and other page components, a shadow between those components, and the background. 

With the help of additional tweaks, you can fine-tune the container’s appearance. 

Additional settings for a border include:

  • Color
  • Size
  • Radius (rounding off the border’s corner radius)

Extra settings for the shadow are:

  • Blur
  • Distance
  • Angle
  • Color

There are two types of background: color and image. To customize the background, press the Edit button.

To change color, select a color fill using a color picker.

Layout 

The layout icon enables you to control the layout settings of your contact form, including content alignment (horizontal or vertical), the spacing between the fields, and the padding. To get more info on working with widgets in Boxmode, read our Widgets Overview article.

Aligning elements

You can align elements inside the grid in several ways: 

  • Distribute elements to the extreme areas of the layout vertically
  • Spread multiple elements evenly in the center
  • Disperse multiple elements from the edges to the center
Caution!

When you align the elements, the alignment affects the entire container.

Horizontal positioning of elements

Initially, elements and element blocks do not have horizontal margins and are completely anchored vertically to columns.

To control the spacing between elements, you use Margin and Padding. They allow to handle:

  • The distance between a card block and text
  • The width between two text blocks
  • The spacing from text to the main area of the responsive container
  • The spacing from the block to the other block’s text
  • The adjustment of the spacing inside the block
  • The text/block spacing 

So now, you are fully equipped to create your amazing website with Boxmode’s help! But, if you don’t know how to utilize responsive design in your projects, check out our Responsive Web Designs Ideas article. And, it’s time for you to try out the responsive design yourself!

Go to Editor