Grid
The Grid system is a flexible way to create responsive layouts by dividing the screen into rows Rows and columns Cols. It is based on flexbox, uses a 12-column layout, and supports 6 breakpoints: xs, sm, md, lg, xl, and xxl.
Overview of functions
Responsive: Grid allows you to create responsive layouts that adapt to different screen sizes and orientations.
Nesting : Developers can nest multiple wje-grid elements inside each other to create more complex layouts. This allows for greater flexibility in the arrangement of content.
Breakpoints: The Grid system supports breakpoints for phones, tablets, desktop screens, and larger layouts through xxl.
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 usage
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.
Responsive order
When order is combined with breakpoints or different column sizes, make sure the visual order still matches user expectations on each device size.
Alignment
Vertical Alignment
Columns can be aligned vertically using CSS classes wje-align-items-start, wje-align-items-center, wje-align-items-end.
Horizontal Alignment
Columns can be aligned horizontally using the CSS classes wje-justify-content-start, wje-justify-content-center, wje-justify-content-end, wje-justify-content-between, wje-justify-content-around.
When to use
Use wje-grid when you need responsive content layout inside a section or page.
When not to use
Do not use the grid to handle business logic or application state orchestration. It is a layout tool only.
Accessibility
Make sure visual reordering does not break the logical reading and tab order for keyboard and screen-reader users.
Best Practices
- Define mobile/desktop breakpoints first, then refine visual details.
- Prefer spacing tokens over ad-hoc margin/padding overrides.
- Test keyboard and screen reader behavior for overflow scenarios.
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
| Name | Description |
|---|---|
default | The slot for adding child elements or components. |