menu
announcement

Spectrum is now read-only. Learn more about the decision in our official announcement.

styled-system

Style props for rapid UI development

Channels
Team

Mixing grid layout and scaled spacing

November 16, 2020 at 12:06pm

Mixing grid layout and scaled spacing

November 16, 2020 at 12:06pm (Edited 2 years ago)
I'm currently trying to get my head around the styled-system approach. Coming from design systems which utilize a classic column-based grid (e.g. Bootstrap) I have the feeling that this is somewhat opposed to specifying spacing (mostly margins) with the styled-system scale (by using mx, my, etc.). IMHO, mixing both approaches would lead to inconsistent spacings (i.e. components not falling into the grid) because the styled-system scale is given in absolute units (2, 4, 8, 16, etc.) whereas flexbox-based grids usually utilize percentages for the columns. Am I missing/not understanding something here or is this really something which doesn't really play well together and I should choose one over the other instead of trying to unify the approaches?
No messages yet