The Sugar grid differs significantly from traditional grid systems like Bootstrap or Tailwind, yet achieves similar results. Impressively, it accomplishes this in only 150 lines of code, making it considerably more concise than alternatives such as Bootstrap's grid, which is 10 times larger.
The CSS utilized for the grid can be somewhat challenging to comprehend, yet it constitutes an intriguing piece of code. I encourage you to examine it further here.
Sugar grid is:
- Based on CSS grid
- Container-driven
- Derived from its content
- Defined by custom properties
auto-fit on
elements with container queries! Until the bug is fixed, there must be an additional,
otherwise meaningless, div wrapping all the cells inside the .s-grid. Once the bug is
resolved and Sugar grid is adjusted accordingly, all the "meaningless" divs can be removed.Based on CSS Grid
It is built around:
grid-template-columns: repeat(auto-fit, minmax(var(--column-width), 1fr));
Which means that items are placed into dynamically created columns.
Container Driven
Sugar grid uses container queries under the hood. This means that Sugar grid is component-ready. Traditionally, a media query-driven grid is challenging to use in library components, as the library developer does not know what width the component will have. With Sugar's container-driven grid, this is not an issue at all.
Derived from Its Content
Columns are added to a grid as the grid (container) grows. Columns have a predefined optimal size (5rem). Once there is an additional 5rem, a new column is added. Until then, columns evenly eat the remaining space. Sugar grid takes care of scenarios like your item should span across 5 columns, but the container only has space for 3, etc.
Defined by Custom Properties
The grid container is defined by the class .s-grid; everything else is defined by
inline custom properties.