Ssstyles › Layout

The layout components don't style elements on itself, but provide a pattern for containers to arrange their children.

# Base grid

Source

The base grid is the basic layout of the site. It supports a header, a navigation below and a footer on the bottom. The rest of the viewport is taken up by the main content area, which can expand to accommodate its content.

On large viewports, the navigation snaps to the right side of the content area.

You don't need to add a data attribute to anything. As soon as you import the css file, it will automatically apply to the document.

@import "ssstyles/css/basegrid.css" layer(layout);

Visualize the base grid

You can configure the basegrid yourself by editing the values of those variables:

:root {
	--basegrid: "header ." "nav side" "content side" "footer .";
	--basegrid-rows: max-content max-content auto max-content;
	--basegrid-cols: calc(100% - 1rem) 20ch;
}

# Auto grid

Source

The auto grid divides its children into groups of 2, 3 or 4, depending on what you write into the data attribute. The children will be fitted into the viewport based on available space.

You need to import the CSS file and assign the data attribute to use it.

@import "ssstyles/css/autogrid.css" layer(layout);

<div data-autogrid="1/3">
	<div data-card>What</div>
	<div data-card>is</div>
	<div data-card>love?</div>
</div>

<div data-autogrid="1/4">
	<div data-card>Baby</div>
	<div data-card>don't</div>
	<div data-card>hurt</div>
	<div data-card>me</div>
</div>

<div data-autogrid="1/2">
	<div data-card>Oh</div>
	<div data-card>no</div>
</div>

# Flex grid

Source

The flex grid will spread its children evenly across the availbale space. It will line-break if necessary and automatically fill up the next line.

You need to import the CSS file and assign the data attribute to use it.

@import "ssstyles/css/flexgrid.css" layer(layout);

<div data-flexgrid>
	<div data-card>What is love?</div>
	<div data-card>Baby don't hurt me</div>
	<div data-card>Oh no</div>
</div>