Simple
Below is a simple example of the base grid where the span per element is set to
two columns (2 * 5rem). When an additional 10rem becomes available, a
new element is automatically placed into the first row. You can easily specify the optimal
cell size, and the framework handles the layout automatically. No need for cumbersome
col-sm-6 col-md-4 col-lg-3 classes just to make a cell similar in size across resolutions.
<div class="s-grid" style="--span:2;">
<div>
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
</div>
</div> You can resize the card above by the bottom-right handle
Advanced
In the example below, the padding of all cells was globally set using
--padding: 1rem;, and the grid gap was changed from the default 1rem
to
--gap: 0.25rem;.
The default span is set to --span: 2;.
The cell A has
--span-3: 1;, indicating that once there are at least three columns available,
this cell should take one column instead of the default --span: 2;.
The cell B works similarly to cell A, but with different numbers.
The cell C simply overwrites the default --span: 2; with
--span: 3;.
<div
class="s-grid"
style="
--span:2;
--padding: 1rem;
--gap:0.25rem;">
<div>
<div style="--span-3:1;">A</div>
<div style="--span-4:3;">B</div>
<div style="--span:3;">C</div>
</div>
</div> You can resize the card above by the bottom-right handle
Shared cell definitions
A significant advantage of the Sugar grid is the ability to define cell behavior on the grid itself, avoiding the need to specify behavior for each individual cell, even when it's the same across the grid.
The example below addresses a simple requirement: defining three columns when the container is wide and just one column when it gets narrower. The goal is to prevent a situation where there are two cells in the first row and an odd one in the second. When there are 5 or fewer columns available, they span across the whole container. When there are six columns, they span across just two columns. The beauty lies in the fact that you can define this cell behavior on the grid itself, not on every single cell separately.
<div class="s-grid" style="--span:5;--span-6:2;">
<div>
<div>A</div>
<div>B</div>
<div>C</div>
</div>
</div> You can resize the card above by the bottom-right handle
Nested grids
Grids can be nested; however, it's important to note that defaults from the outer grid are not inherited by the nested grid.
Beware that a cell cannot serve as a grid container at the same time.
<div
class="s-grid"
style="--span:3;--padding: 1rem; ">
<div>
<div>
<div class="s-grid">
<div>
<div>A</div>
<div>B</div>
<div>C</div>
</div>
</div>
</div>
<div>B</div>
<div>C</div>
</div>
</div> You can resize the card above by the bottom-right handle
Fixed columns
In contrast to the default grid setup, columns in a fixed grid never expand to unused space. This behavior is useful when dealing with a dynamic number of items in the grid wrapper.
For example, consider product cards in an e-shop. If you filter them to only one product, you wouldn't want it to expand across the entire wrapper; instead, it remains fixed.
<div class="s-grid s-fixed">
<div>
<div>A</div>
<div>B</div>
</div>
</div> You can resize the card above by the bottom-right handle
Cell offset
<div class="s-grid" style="--padding: 1rem;">
<div>
<div style="--span:1;">A</div>
<div style="--span:1;--offset:1;">B</div>
</div>
</div> You can resize the card above by the bottom-right handle