Grid

The Grid Block is a full-width container with an embedded 12/12 grid. It differs from the Grid Container Widget in that it is completely set up and ready to use inside of the full-width container.

Using this block, saves time. You don’t have to create a container to hold the Grid. Just drop this widget into your website or WebApp. You can access all of the the typical advanced Grid and/or Container properties by double clicking on the full-width container.

Grid Editor

Properties

• No “Gutters”. When selected, the columns will create gutters (gaps between column content) via padding. This is a global property for the Grid Widget.  
  

• Default Vertical Align. Default alignment for the columns. Note that you can also set it up for individual columns.
  

• Column Size. Column classes indicate the number of columns you want to use out of the possible 12 per row. Normally the total of the columns sizes should be 12. (eg. 4/12 + 3/12 + 5/12) 
  

• Vertical Align. You can change the vertical alignment of columns elements.
  

• Cell Padding. The cell padding attribute (internal margin) specifies the space, in pixels, between the cell wall and the cell content.
  

• Breakpoint. To make the grid responsive, you can define one of the 5 breakpoints, one for each responsive breakpoint: extra small, small, medium, large, and extra large.
  From the selected breakpoint and up, the table will behave normally and not scroll horizontally.
  

  • For phones - screens less than 768px wide

  • For tablets - screens equal to or greater than 768px wide 

  • For small laptops - screens equal to or greater than 992px wide 

  • For laptops and desktops - screens equal to or greater than 1200px wide

• Hidden for Screen. The contents can be hidden and disappear from the screen in order to adapt to any type of device according to the same breakpoints explained above.
  

• Sticky column. If selected, then the columns will stick to the top of the screen when the user scroll the page.  
  

Examples

Resize your Browser in order to view how the grids can behave on different screen sizes.