Grid
The Grid component is a flexible and customizable component that implements a CSS grid layout. It allows you to create complex layouts with minimal code. You should use it in combination with Appshell to have fixed breakpoints.
Breakpoints
Grid is one of the few components that uses BreakPoints.
Breakpoints only work inside of the Appshell Component.
Grid calculates the breakpoint changes based on min and maxColumnWidth
checkout the breakpoint section for more detailed information about Breapoints in solid-layout
Width
Css
Changes
480px
@container app_shell (max-width: 480px)
gridTemplateColumns:repeat(minmax(minColumnWidth or 100px, 1fr))
768px
@container app_shell (max-width: 768px)
gridTemplateColumns:repeat(minmax(minColumnWidth +50px or 150px, 1fr))
1024px
@container app_shell (max-width: 1024px)
gridTemplateColumns:repeat(minmax(maxColumnWidth -50px or 200px, 1fr))
1280px
@container app_shell (max-width: 1280px)
gridTemplateColumns:repeat(minmax(maxColumnWidth or 250px, 1fr))
1536px
@container app_shell (max-width: 1536px)
gridTemplateColumns:repeat(minmax(maxColumnWidth +50px or 300px, 1fr))