Grid

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>
A
B
C
D

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>
A
B
C

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>
A
B
C

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>
A
B
C
B
C

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>
A
B

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>
A
B

You can resize the card above by the bottom-right handle

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.