Installation
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/skpaul/griddle@2.0.1/griddle.min.css">
Creating a grid
Griddle uses fr (fr = fraction) in stead of col (column).
"fr" is the default unit in CSS Grid world.
Use .grid to create a grid. .grid creates a 12-fraction grid on large device and convert it to 1-fraction grid on small device.
You also can use .griddle instead of .grid, to avoid confict with other CSS framework.
<div class="grid">
<div>fr1</div>
<div>fr2</div>
<div>fr3</div>
<div>fr4</div>
<div>fr5</div>
<div>fr6</div>
<div>fr7</div>
<div>fr8</div>
<div>fr9</div>
<div>fr10</div>
<div>fr11</div>
<div>fr12</div>
</div>
Customizing grid fractions
The following classes are used to customize grid fractions -
.fr1
.fr2
.fr3
.fr4
.fr5
.fr6
.fr7
.fr8
.fr9
.f10
.f11
.f12
For example, use .fr5 to create a grid with 5 fractions in each row -
<div class="grid fr5">
<div>fr1</div>
<div>fr2</div>
<div>fr3</div>
<div>fr4</div>
<div>fr5</div>
<div>fr6</div>
<div>fr7</div>
<div>fr8</div>
<div>fr9</div>
<div>fr10</div>
<div>fr11</div>
<div>fr12</div>
</div>
Create grid with unknown fractions
Use .auto to create a grid where grid childs quantity are unknown.
Each child will have min-width:100px.
<div class="grid auto">
<div>fr1</div>
<div>fr2</div>
<div>fr3</div>
<div>fr4</div>
<div>fr5</div>
<div>fr6</div>
<div>fr7</div>
<div>fr8</div>
<div>fr9</div>
<div>fr10</div>
<div>fr11</div>
<div>fr12</div>
</div>
While using .auto, you can use the following classes to limit the number of fractions on each row-
.max1-sm.max2-sm.max3-sm.max4-sm.max5-sm.max6-sm.max7-sm.max8-sm.max9-sm.max10-sm.max11-sm.max12-sm.max1-lg.max2-lg.max3-lg.max4-lg.max5-lg.max6-lg.max7-lg.max8-lg.max9-lg.max10-lg.max11-lg.max12-lgMaking the grid responsive
Use -sm or -lg suffix to make your grid responsive.
For example, the following grid shows 12 fractions in large device and 3 fractions in small device -
<div class="grid fr12-lg fr3-sm">
<div>fr1</div>
<div>fr2</div>
<div>fr3</div>
<div>fr4</div>
<div>fr5</div>
<div>fr6</div>
<div>fr7</div>
<div>fr8</div>
<div>fr9</div>
<div>fr10</div>
<div>fr11</div>
<div>fr12</div>
</div> Creating grid childs
All child elements within a .grid are grid childs.
But, mixing of different types of element in a single grid is not recommended.
fr3
<div class="grid">
<span>fr1</span>
<article>fr1</article>
<p>fr3</p>
<div>fr4</div>
<div>fr5</div>
<div>fr6</div>
<div>fr7</div>
<div>fr8</div>
<div>fr9</div>
<div>fr10</div>
<div>fr11</div>
<div>fr12</div>
</div>Customizing grid child
By default, every child takes 1 fraction space. But you can this default behavior.
In the following example, .fr4 and .fr2 has been used to extend the childs.
<div class="grid">
<div></div>
<div class="fr4">.fr4 applied</div>
<div></div>
<div></div>
<div class="fr2">.fr2 applied</div>
<div></div>
<div></div>
<div></div>
</div>
You can also make the child's fraction size responsive.
In the following example, .fr5-lg and .fr1-sm has been used to make the child's size responsive.
In large device, it will take 5 fractions, but in small device it will take 1 fraction.
<div class="grid">
<div></div>
<div></div>
<div></div>
<div class="fr5-lg fr1-sm">fr4</div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
Use .from4 or .from4-sm or .from4-lg to start a child from specific fraction.
<div class="grid">
<div>fr1</div>
<div class="from4">fr2</div>
<div>fr3</div>
<div>fr4</div>
<div>fr5</div>
<div>fr6</div>
<div>fr7</div>
<div>fr8</div>
<div>fr9</div>
<div>fr10</div>
</div>Custom row/column gap
By default, 0.625rem gap is used for all sides. But you can set different values for row and column. Available values are-
0.10.20.30.40.50.60.70.80.91.01.11.21.31.41.51.61.71.81.92.02.12.22.32.42.52.62.72.82.93.03.13.23.33.43.53.63.73.83.94.0
.rowgap-0.1 |
: | Sets grid-row-gap:0.1rem |
.rowgap-1.3-sm |
: | Sets grid-row-gap:1.3rem in small (mobile/tab) screen. |
.rowgap-1.3-lg |
: | Sets grid-row-gap:1.3rem in large (desktop/laptop) screen. |
.colgap-0.1 |
: | Sets grid-col-gap:0.1rem |
.colgap-1.3-sm |
: | Sets grid-col-gap:1.3rem in small (mobile/tab) screen. |
.colgap-1.3-lg |
: | Sets grid-col-gap:1.3rem in large (desktop/laptop) screen. |