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 flexbox based, uses 12 columns 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: Grid supports breakpoints for phones, tablets and desktop including larger screens via 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, the columns within a row are the same width on all devices.
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
If you combine order with breakpoints or different column widths, always check that the visual order still matches what the user expects on a particular device.
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 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 a responsive layout of content within a section or page.
When not to use
Do not use the Grid to solve business logic or orchestrate state. It is used exclusively for layout.
Accessibility
Make sure that the visual order of the columns does not break the logical order of the content for the keyboard and screen readers.
Recommended practices
- Define desktop/mobile breakpoints first and then fine-tune the details.
- Prefer consistent spacing tokens over ad-hoc margin/padding values.
- For layouts with overflow, always test keyboard navigation and readers.
Attributes and properties
Pre tento komponent nie sú dostupné žiadne vlastnosti.
Events
Pre tento komponent nie sú dostupné žiadne udalosti.
Methods
Pre tento komponent nie sú dostupné žiadne verejné metódy.
CSS shadow parts
Pre tento komponent nie sú dostupné žiadne CSS časti tieňa.
CSS custom variables
Pre tento komponent nie sú dostupné žiadne vlastné CSS vlastnosti.
Slots
| Názov | Popis |
|---|---|
default | Predvolený slot pre hlavný obsah komponentu. |