Grid
The Grid system is a flexible way to create responsive layouts by dividing the screen into a grid of rows Rows and columns Cols. Grid is based on flexbox with layout divided into 12 columns with 5 responsive breakpoints.
Overview of functions
Responsive: Grid allows you to create responsive layouts that adapt to different screen sizes and orientations.
Nesting : Developers can nest multiple wj-grid elements inside each other to create more complex layouts. This allows for greater flexibility in the arrangement of content.
Breakpoints: The Grid Grid system supports different breakpoints for different screen sizes such as phones, tablets and desktops.
Offset columns: Developers can offset columns to create visual differences in layout. This is useful when creating designs with staggered or asymmetrical layouts.
Automatic Layout: Grid provides options to automatically adjust column sizes based on content or available space. This can help optimize the layout for different scenarios.
Default Breakpoints
The table below shows the default grid breakpoints.
Basic use
By default, columns will take up equal width inside of a row for all devices and screen sizes.
Column size: auto
Setting size to auto adjusts the column to the width of its contents, and adjacent columns automatically adjust their width to fill the remaining space in the row.
Specific column size
Setting size to a specific column size will occupy the specified number of columns of the row. Adjacent columns automatically adjust their width to fill the remaining space in the row.
Responsive column size
The size attribute can also be set with a specific breakpoint by adding its prefix. In this case, the column size is adjusted only after the set breakpoint is reached.
Offset
Offset allows you to create an empty space in the layout by shifting a given column to the right. The offset attribute takes a numeric value that represents the number of columns by which to offset the target column.
Responsive Offset
By adding a breakpoint to the offset, the column offset is adjusted only after the selected breakpoint is reached.
Order
The order of the columns can be modified by adding the order attribute and setting its value to the position in the grid where it should be placed.
Alignment
Vertical Alignment
Columns can be aligned vertically using css classes wj-align-items-start, wj-align-items-center, wj-align-items-end.
Horizontal Alignment
Columns can be aligned horizontally using the css classes wj-justify-content-start, wj-justify-content-center, wj-justify-content-end, wj-justify-content-between, wj-justify-content-around.
Attributes and Properties
No properties available for this component.
Events
No events available for this component.
Methods
No public methods available for this component.
CSS Shadow Parts
No CSS shadow parts available for this component.
CSS Custom Properties
No CSS custom properties available for this component.
Slots
No slots available for this component.