Skip to main content

Grid Item
New

Grid Item is a component used inside the Grid that makes it possible set additional parameters for items. For concrete usage examples, please see Grid component.

Properties #

Property Attribute Description Type Default
breakpoint breakpoint Switch the breakpoint used to trigger the content stacking. This property is used internally by Grid, and should not be set by the developer. "medium" | "small" | "x-large" "small"
fill fill Make the grid item fill the remaining available grid space. boolean false
margin margin Controls the margin of the component. "auto" | "none" "auto"
maxWidth max-width Sets the maximum width for the grid item using any valid numeric CSS value. E.g. "300px". string undefined
minWidth min-width Sets the minimum width for the grid item using any valid numeric CSS value. E.g. "33.333%". string undefined
responsive responsive Enable or disable the automatic responsive behaviour of the grid item. This property is used internally by Grid, and should not be set by the developer. boolean false
theme theme Theme of the grid item. "" | "default" | "turva" ""

Dependencies #

Used by #

Graph #

graph TD;
duet-textarea --> duet-grid-item
style duet-grid-item fill:#f9f,stroke:#333,stroke-width:4px

Integration

For integration, event and theming guidelines, please see Using Components. This documentation explains how to implement and use Duet’s components across different technologies like Angular, React or Vanilla JavaScript.



Tutorials

Follow these practical tutorials to learn how to build simple page layouts using Duet’s CSS Framework, Web Components and other features:

Tutorials

Building Layouts

Tutorials

Using CLI Tools

Tutorials

Creating Custom Patterns

Tutorials

Server Side Rendering

Tutorials

Sharing Prototypes

Tutorials

Usage With Markdown


Troubleshooting

If you experience any issues while using a component, please head over to the Support page for more guidelines and help.