Grid row3.0
The anchor-grid-row is a non-visual component that serves as a flexible grid row for layout purposes. It's designed to be responsive.
Installation
npm i @tryg/ui-libraryUsage
Individual only imports the desired component, and only needs to be included once within the application. Which is beneficial to keep the application size small.
<script type="module">
import { defineCustomElement } from '@tryg/ui-library/dist/components/anchor-container';
defineCustomElement();
</script>
<anchor-grid-row>This is an error message.</anchor-grid-row>Global only needs to be defined once in the application, but it will import all components even the ones that are not in use..
<script type="module">
import { defineCustomElements } from '@tryg/ui-library/dist/loader';
defineCustomElements();
</script>
<anchor-grid-row>This is an error message.</anchor-grid-row>API
anchor-grid-row
CSS Custom Properties
| Name | Description |
|---|---|
--grid-row-columns-lg | Set the number of columns in the grid at the large screen size. |
--grid-row-columns-md | Set the number of columns in the grid at the medium screen size. |
--grid-row-columns-sm | Set the number of columns in the grid at the small screen size. |
--grid-row-columns-xl | Set the number of columns in the grid at the extra large screen size. |
--grid-row-columns-xs | Set the number of columns in the grid at the smallest screen size. |
--grid-row-gutter-lg | Set the space between rows in the grid at the large screen size. |
--grid-row-gutter-md | Set the space between rows in the grid at the medium screen size. |
--grid-row-gutter-sm | Set the space between rows in the grid at the small screen size. |
--grid-row-gutter-xl | Set the space between rows in the grid at the extra large screen size. |
--grid-row-gutter-xs | Set the space between rows in the grid at the smallest screen size. |
--grid-row-horizontal-gap-lg | Set the space between columns in the grid at the large screen size. |
--grid-row-horizontal-gap-md | Set the space between columns in the grid at the medium screen size. |
--grid-row-horizontal-gap-sm | Set the space between columns in the grid at the small screen size. |
--grid-row-horizontal-gap-xl | Set the space between columns in the grid at the extra large screen size. |
--grid-row-horizontal-gap-xs | Set the space between columns in the grid at the smallest screen size. |
Built with StencilJS
Container
The anchor-container is a component that serves as a generic container for other components or content. It's designed to be flexible and reusable across different parts of an application.
Grid column
The grid-column component is a non-visual layout component that can be used to create a grid layout. It works as a child component of the grid-row component.