Grid

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:

  1. Based on CSS grid
  2. Container-driven
  3. Derived from its content
  4. Defined by custom properties

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.

Modal title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum harum laborum quo vero veritatis eaque similique fuga quae, repudiandae, necessitatibus dolorem facere obcaecati beatae architecto expedita laboriosam cumque numquam inventore. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum harum laborum quo vero veritatis eaque similique fuga quae, repudiandae, necessitatibus dolorem facere obcaecati beatae architecto expedita laboriosam cumque numquam inventore.

Dialog title

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Asperiores vitae officia, voluptatem modi quos quisquam similique tenetur voluptatum, ratione suscipit numquam dolore aperiam molestiae impedit. Ut, maiores? Alias, quos facilis.