Grid Component

Grid component is vital for organizing HTML elements horizontally. Without Grid, every contents are arranged vertically with responsive 100% width. Bissetii uses the CSS flexbox technology to perform dynamic wrapping.

This component is available starting from v1.11.0.

Example usage:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<div class="row">
	<div class="column">
		
<img alt="Image Srcset Demo With Sizes"
	src="https://bissetii.zoralab.com/img/bg/img_480w.svg"
	width="200"
	height="150"
	srcset="https://bissetii.zoralab.com/img/bg/img_480w.svg 480w,https://bissetii.zoralab.com/img/bg/img_800w.svg 800w,https://bissetii.zoralab.com/img/bg/img_1024w.svg 1024w,https://bissetii.zoralab.com/img/bg/img_2048w.svg 2048w,https://bissetii.zoralab.com/img/bg/img_4096w.svg 4096w"
	loading="lazy"/>

		<p>Caption 1</p>
	</div>

	<div class="column">
		
<img alt="Image Srcset Demo With Sizes"
	src="https://bissetii.zoralab.com/img/bg/img_480w.svg"
	width="200"
	height="150"
	srcset="https://bissetii.zoralab.com/img/bg/img_480w.svg 480w,https://bissetii.zoralab.com/img/bg/img_800w.svg 800w,https://bissetii.zoralab.com/img/bg/img_1024w.svg 1024w,https://bissetii.zoralab.com/img/bg/img_2048w.svg 2048w,https://bissetii.zoralab.com/img/bg/img_4096w.svg 4096w"
	loading="lazy"/>

		<p>Caption 2</p>
	</div>

	<div class="column">
		
<img alt="Image Srcset Demo With Sizes"
	src="https://bissetii.zoralab.com/img/bg/img_480w.svg"
	width="200"
	height="150"
	srcset="https://bissetii.zoralab.com/img/bg/img_480w.svg 480w,https://bissetii.zoralab.com/img/bg/img_800w.svg 800w,https://bissetii.zoralab.com/img/bg/img_1024w.svg 1024w,https://bissetii.zoralab.com/img/bg/img_2048w.svg 2048w,https://bissetii.zoralab.com/img/bg/img_4096w.svg 4096w"
	loading="lazy"/>

		<p>Caption 3</p>
	</div>

	<div class="column">
		
<img alt="Image Srcset Demo With Sizes"
	src="https://bissetii.zoralab.com/img/bg/img_480w.svg"
	width="200"
	height="150"
	srcset="https://bissetii.zoralab.com/img/bg/img_480w.svg 480w,https://bissetii.zoralab.com/img/bg/img_800w.svg 800w,https://bissetii.zoralab.com/img/bg/img_1024w.svg 1024w,https://bissetii.zoralab.com/img/bg/img_2048w.svg 2048w,https://bissetii.zoralab.com/img/bg/img_4096w.svg 4096w"
	loading="lazy"/>

		<p>Caption 4</p>
	</div>
</div>

Sass Styling Parts

The Sass script responsible for styling the Grid component is located at:

assets/css/bissetii/modules/core/_Grid.scss

The script only facilitates the styling algorithms for the component.

Javascript Parts

This component does not depend any Javascript.

HTML Parts

For Grid component, unlike other framework, Bissetii keeps the design as simple as possible without depending on hard-coded mathematics (e.g. 12 columns layout, column offset by percentage class tag).

For demonstration purposes, the .row’s border is explicitly colored as red to indicate its zone while the .column background is colored as grey.

Here is an example of rendering:

Image Srcset Demo With Sizes

Caption 1

Image Srcset Demo With Sizes

Caption 2

Image Srcset Demo With Sizes

Caption 3

Image Srcset Demo With Sizes

Caption 4

Basic Structure

The basic structure for the Grid component is using a <div> elements with the row class tag. This marks the beginning of a Grid system.

Then, inside the row, you create a set of <div> elements with the column class tag. This marks the number of columns of a Grid system.

Also, you must specify the contents' max-width when creating column per row. Otherwise, the columns' Flexbox styling will overflow into next “row”-alike pattern. This is expected mainly for mobile-friendliness.

A simple example (highlighted the first 2 row usage) would be:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<div class="row">
	<div class="column">
		<p>Column 1</p>
	</div>
</div>

<div class="row">
	<div class="column">
		<p>Column 1</p>
	</div>

	<div class="column">
		<p>Column 2</p>
	</div>
</div>

<div class="row">
	<div class="column">
		<p>Column 1</p>
	</div>

	<div class="column">
		<p>Column 2</p>
	</div>

	<div class="column">
		<p>Column 3</p>
	</div>
</div>

<div class="row">
	<div class="column">
		<p>Column 1</p>
	</div>

	<div class="column">
		<p>Column 2</p>
	</div>

	<div class="column">
		<p>Column 3</p>
	</div>

	<div class="column">
		<p>Column 4</p>
	</div>
</div>

This will render as:

Column 1

Column 1

Column 2

Column 1

Column 2

Column 3

Column 1

Column 2

Column 3

Column 4

Hide Column with Offset

Bissetii uses offset class tag to make a .column visibly hidden. Here is an example of offset-ing second and fourth columns:

NOTE: for offset .column without any contents, the flexbox may adjust the column accordingly. Currently, Flexbox does not have “max/min children” size set to flex-basis. Therefore, you can do 2 ways:

  1. Inline CSS style with flex-basis to a fixed length.
  2. Insert some dummy content in the .offset .column.
<div class="row">
	<div class="column">
		<p>Column 1</p>
	</div>
	<div class="column offset">
		<p>Column 2</p>
	</div>
	<div class="column">
		<p>Column 3</p>
	</div>
	<div class="column offset">
		<p>Column 4</p>
	</div>
</div>

This will render as:

Column 1

Column 2

Column 3

Column 4

Mulitply Sizes

Bissetii uses simple multiplication to denote uneven column widths. The multiplication magnitude starts from 2x to 10x governed by class tags. They are: grid-2x, grid-3x, … grid-10x. If the total width is not permittable (hitting maximum width), the growth and shrinking will halt as well.

Currently, Bissetii uses 10 as base value for flex-grow and calc CSS function to multiply it accordingly.

Here is an example of the HTML code:

<div class="row">
	<div class="column">
		<p>Column 1</p>
	</div>

	<div class="column grid-2x">
		<p>Column 2</p>
	</div>
</div>

<div class="row">
	<div class="column">
		<p>Column 1</p>
	</div>

	<div class="column grid-3x">
		<p>Column 2</p>
	</div>
</div>

<div class="row">
	<div class="column">
		<p>Column 1</p>
	</div>

	<div class="column grid-4x">
		<p>Column 2</p>
	</div>
</div>

<div class="row">
	<div class="column">
		<p>Column 1</p>
	</div>

	<div class="column grid-5x">
		<p>Column 2</p>
	</div>
</div>

<div class="row">
	<div class="column">
		<p>Column 1</p>
	</div>

	<div class="column grid-6x">
		<p>Column 2</p>
	</div>
</div>

<div class="row">
	<div class="column">
		<p>Column 1</p>
	</div>

	<div class="column grid-7x">
		<p>Column 2</p>
	</div>
</div>

<div class="row">
	<div class="column">
		<p>Column 1</p>
	</div>

	<div class="column grid-8x">
		<p>Column 2</p>
	</div>
</div>

<div class="row">
	<div class="column">
		<p>Column 1</p>
	</div>

	<div class="column grid-9x">
		<p>Column 2</p>
	</div>
</div>

<div class="row">
	<div class="column">
		<p>Column 1</p>
	</div>

	<div class="column grid-10x">
		<p>Column 2</p>
	</div>
</div>

This will render as:

Column 1

Column 2

Column 1

Column 2

Column 1

Column 2

Column 1

Column 2

Column 1

Column 2

Column 1

Column 2

Column 1

Column 2

Column 1

Column 2

Column 1

Column 2

Vertical Alignment

The Grid component allows the setting for the .column vertical alignments. They are described in the following sub-sections.

Stretch Alignment

This alignment is the default alignment where all columns are stretched to the longest column available. Here is the rendering example:

Column

Column

Column

Column

Column

Column

Column

Column

Column

Column

Top Alignment

This will align all columns toward the top. To do that, you need to apply the align-top class tag to the .row. The HTML example is:

<div class="row align-top">
	...
</div>

This will render as:

Column

Column

Column

Column

Column

Column

Column

Column

Column

Column

Middle Alignment

This will align all columns toward the vertically-middle of all columns. To do that, you need to apply the align-middle class tag to the .row. The HTML example is:

<div class="row align-middle">
	...
</div>

This will render as:

Column

Column

Column

Column

Column

Column

Column

Column

Column

Column

Bottom Alignment

This will align all columns toward the top. To do that, you need to apply the align-bottom class tag to the .row. The HTML example is:

<div class="row align-bottom">
	...
</div>

This will render as:

Column

Column

Column

Column

Column

Column

Column

Column

Column

Column

Baseline Alignment

This will align all columns toward the baseline of all columns. To do that, you need to apply the align-baseline class tag to the .row. The HTML example is:

<div class="row align-baseline">
	...
</div>

This will render as:

Column

Column

Column

Column

Column

Column

Column

Column

Column

Order Placement

Since Grid component is using flexbox as its primary display, you can use the order property to arrange your .column placement. However, you can only do that using inline styling since the data source is specific to your HTML codes. Here is an example:

<div class="row">
	<div class="column" style="order: 3;">
		<p>Column 1</p>
	</div>
	<div class="column" style="order: 1;">
		<p>Column 2</p>
	</div>
	<div class="column" style="order: 2;">
		<p>Column 3</p>
	</div>
</div>

This will render as:

Column 1

Column 2

Column 3