Dandelion Pro
Buy Now
Welcome to Dandelion Pro
Here is some guide to use this template. Click next to continue and back to previous or click on outside to skip it.
Grid Spacing
The responsive grid focuses on consistent spacing widths, rather than column width. Material design margins and columns follow an 8dp square baseline grid. Spacing can be 8, 16, 24, or 40 pixel wide.
Full-width
Full-width grids: use fluid columns and breakpoints to determine when a layout needs to change.
xs=12
xs=12 sm=6
xs=12 sm=6
xs=6 sm=3
xs=6 sm=3
xs=6 sm=3
xs=6 sm=3
Centered Grid
Centered grids: use fixed columns and re-flow the layout when all columns (plus a defined margin) no longer fit on the screen.
xs=12
xs=6
xs=6
xs=3
xs=3
xs=3
xs=3
Interactive
Below is an interactive demo that lets you explore the visual results of the different settings:
Cell 1
Cell 2
Cell 3
Auto Layout
The Auto-layout makes the items equitably share the available space. That also means you can set the width of one item and the others will automatically resize around it.
Material-UI Grid:
xs=3
xs=3
xs=3
xs=3
xs=8
xs=4
CSS Grid Layout:
xs=3
xs=3
xs=3
xs=3
xs=8
xs=4
Limitations
There is one limitation with the negative margin we use to implement the spacing between items.
W
Truncation should be conditionally applicable on this long line of text as this is a much longer line than what the container can support.
W
Truncation should be conditionally applicable on this long line of text as this is a much longer line than what the container can support.
W
Truncation should be conditionally applicable on this long line of text as this is a much longer line than what the container can support.