Grid containers provide a quick method to create structured containers divided into columns and rows.
How to create a Grid Container
- Open a page in 10Web Builder Editor.
- Click the “+” sign on the canvas.
- Select Grid from the options and choose a grid structure.
Layout tab
Container
- Container Layout: Switch between Grid and Flexbox if needed.
- Content Width: Control the maximum width of the grid container's content by choosing Full width or Boxed.
- Width: Specify the width of the grid container.
- Min Height: Set the minimum height for the grid container.
Items
- Grid Outline: Toggle to show or hide the outline of the grid.
- Columns: Determine the number of columns in the grid.
- Rows: Specify the number of rows in the grid.
- Gaps: Set the spacing between grid items (columns and rows).
- Auto Flow: Define the direction in which items are placed automatically, either Row-wise or Column-wise.
- Justify Items: Positions grid items along the main axis.
- Align Items: Align grid items along the cross axis.
Additional Options
- Overflow: Define how content that overflows the grid container is handled. You can set it to
- Default which allows content to overflow the container, Hidden that clips content that overflows the container or Auto to add scrollbars when content overflows the container.
- HTML Tag: Specifies the HTML tag used for the grid container.
Style tab
Background
- Normal/Hover: Allows you to set different background styles for normal (default) and hover states.
- Background Type: Specify the type of background you want to apply to the grid or grid items. Options include Classic, Gradient, Video or Slideshow backgrounds.
- Transition Duration: Specify the duration of the transition effect when the background changes from normal to hover state or vice versa.
Background Overlay
- Normal/Hover: Set different overlay styles for normal (default) and hover states.
- Background Type: Specify the type of background overlay applied to the grid or grid items.
- CSS Filters: Allows you to apply CSS filter effects to the background overlay.
- Transition Duration: Determine how long the transition effect takes to switch the background from its normal to hover state or vice versa.
Border
- Normal/Hover: Set different border styles for normal (default) and hover states.
- Border Type: Specify the type of border style you want to apply. Options typically include Default, None, Solid, Double, Dotted, Dashed, Groove.
- Border Radius: Define the curvature of the corners of the border.
- Box Shadow: Add a shadow effect to the box or element.
Shape Divider
- Top/Bottom: Place a decorative shape divider at either the top or bottom of a section.
- Type: Specify the type of shape divider you want to use. Options typically include various geometric shapes.
Advanced tab
You can customize the widget further using the settings available in the Advanced tab. These options provide additional styling and functionality adjustments, allowing you to tailor the widget to better fit your design needs.