Les grilles

Créez des mises en page dynamiques en divisant l'espace d'affichage avec des fonctionnalités intelligentes

Une grille pour les gouverner toutes.

Le système de grille de Sass Swing est basé uniquement sur les grid CSS. Sass Swing étant orienté mobile first la grille par défaut comprend qu'une seule colonne. Les grilles sont basées sur un maximum de 8 colonnes. Vous pouvez, dans la version SASS modifier ce nombre grâce à la variable $default-grid-columns. Notez que par défaut les grilles ne sont pas espacées.

<div class="grid">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</div>

Vous pouvez choisir le nombre de colonnes par ligne avec la classe .cols-x avec x allant de 2 à 8 (maximum de colonne) ou choisir le mode auto avec .cols-auto.

<div class="grid-sample grid cols-2">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</div>

<div class="grid-sample grid cols-auto">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</div>

Espacements

Vous pouvez ajouter de l'espacement entre les lignes et colonnes avec les classes .gap-_x, juste sur les colonnes avec .row-gap-_x et enfin juste sur les colonnes avec .col-gap-_x. Avec X variant de 1 à 8 (3 est la taille de pour un espace "normal").

<div class="grid cols-2 gap-3">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</div>

<div class="grid cols-4 gap-3 cols-2 row-gap-1 col-gap-2">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
  <div>5</div>
	<div>6</div>
	<div>7</div>
	<div>8</div>
</div>

Contrôler les dimensions

Vous avez la possibilité de contrôler la position et les dimensions de chaque ligne et colonne en les fusionnant.

<div class="grid cols-3 gap-3">
<div>1</div>
	<div class="col-start-3">2</div>
	<div>3</div>
	<div>4</div>
	<div class="col-start-1 col-end-4">5</div>
	<div class="col-start-2">6</div>
	<div class="col-end-4">7</div>
</div>

<div class="grid cols-3 gap-3">
	<div class="col-span-full">0</div>
	<div>1</div>
	<div class="row-span-2">2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div class="col-span-3">6</div>
</div>

Adaptation et points d'arrêts

Vous pouvez contrôler le flux de colonnes en fonction de la largeur d'affichage de l'appareil grâce au media-queries. cf breakpoints pour plus d'informations.

Vous avez le contrôle sur le nombre de lignes, de colonnes, leur taille ainsi que sur les espacements. C'est très simple, il vous suffira de préfixer le nom des classes par les différents "breakpoints" disponibles t:, md:, d:, dm:, lg:, xl: ou xxl:. Vous avez également la possibilité d'imbriquer plusieurs grilles entre elles.

Redimensionnez votre fenêtre d'affichage pour tester, le comportement.

<div class="grid t:cols-2 gap-1">
	<div class="t:col-span-2 d:col-span-full">1
		<div class="grid t:cols-2 md:cols-4 gap-3">
			<div class="t:col-span-2 d:col-span-full">a</div>
			<div>b</div>
			<div>c</div>
			<div>d</div>
			<div>e</div>
			<div class="d:col-span-2">f</div>
			<div class="d:col-span-2">g</div>
			<div class="t:col-span-full">h</div>
		</div>
	</div>
	<div>2</div>
	<div>3
		<div class="grid md:cols-2 d:cols-3 gap-1">
			<div class="col-span-full d:col-span-1">a</div>
			<div>b</div>
			<div>c</div>
			<div>d</div>
			<div class="col-span-full md:col-span-1">e
				<div class="subgrid md:cols-2 gap-1">
					<div>a</div>
					<div>b</div>
					<div>c</div>
					<div>d</div>
				</div>
			</div>
			<div class="col-span-full d:col-span-1">f</div>
		</div>
	</div>
	<div>4</div>
	<div>5</div>
	<div class="col-span-full">6</div>
</div>

Empilez vos éléments

Les grilles css, nous donnent également d'empilé nos éléments les un par-dessus les autres. Ce qui nous évite de créer des éléments avec position:absolute;. Nous pourrons également nous en servir pour créer des en-têtes de page nommés couramment "hero"

Vous pouvez contrôler les dimensions en spécifiant le ratio d'aspect via la variable css local --aspect-ratio

Heading

Slogan here

Heading

Slogan here

<div class="grid-stacked">
	<div>
		<h1>Heading</h1>
		<p>Slogan here</p>
	</div>
	<img src="../../assets/images/image01.jpg" width="200" height="300" alt="hero image">
</div>

<div class="grid-stacked" style="--aspect-ratio:16/9;">
	<div>
		<h1>Heading</h1>
		<p>Slogan here</p>
	</div>
	<img src="../../assets/images/image02.jpg" width="200" height="300" alt="hero image">
</div>