TheBestTutorials.css Responsive Fluid Grid
Responsive Grid
TheBestTutorials.css supports a 12 column responsive fluid grid.
Resize the page to see the effect!
This part will occupy 12 columns on a small screen, 4 on a medium screen, and 3 on a large screen.
This part will occupy 12 columns on a small screen, 8 on a medium screen, and 9 on a large screen.
Example
<div class="subhodaya-col m4 l3">
<p>12 columns on a small screen, 4 on a medium screen, and 3 on a large screen.</p>
</div>
<div class="subhodaya-col m8 l9">
<p>12 columns on a small screen, 8 on a medium screen, and 9 on a large screen.</p>
</div>
</div>
Responsive Rows
TheBestTutorials.css's grid system is responsive, and the columns will re-arrange automatically depending on the screen size: On a big screen it might look better with the content organized in three columns, but on a small screen it would be better if the content items were stacked on top of each other.
Columns must reside inside a row to be fully responsive.
Class | Description |
---|---|
TheBestTutorials-row | Defines a padding-less container for responsive columns. |
TheBestTutorials-row-padding | Defines a padded container for responsive columns. |
TheBestTutorials-col | Defines a column with sub classes |
TheBestTutorials-col has the following sub classes:
Columns for small screens (typical smart phones):
Class | Description |
---|---|
s1 | Defines 1 of 12 columns (width:08.33%) for small screens |
s2 | Defines 2 of 12 columns (width:16.66%) for small screens |
s3 | Defines 3 of 12 columns (width:25.00%) for small screens |
s4 | Defines 4 of 12 columns (width:33.33%) for small screens |
s5-s11 | |
s12 | Defines 12 of 12 columns (width:100%). Default for small screens |
Columns for medium screens (typical tablets):
Class | Description |
---|---|
m1 | Defines 1 of 12 columns (width:08.33%) for medium screens |
m2 | Defines 2 of 12 columns (width:16.66%) for medium screens |
m3 | Defines 3 of 12 columns (width:25.00%) for medium screens |
m4 | Defines 4 of 12 columns (width:33.33%) for medium screens |
m5-m11 | |
m12 | Defines 12 of 12 columns (width:100%). Default for medium screens |
Columns for large screens (typical laptops):
Class | Description |
---|---|
l1 | Defines 1 of 12 columns (width:08.33%) for large screens |
l2 | Defines 2 of 12 columns (width:16.66%) for large screens |
l3 | Defines 3 of 12 columns (width:25.00%) for large screens |
l4 | Defines 4 of 12 columns (width:33.33%) for large screens |
l5-l11 | |
l12 | Defines 12 of 12 columns (width:100%). Default for large screens) |
The classes above can be combined to create more dynamic and flexible layouts.
Each class scales up, so if you wish to set the same width for small, medium and large screens, you only need to specify the small class. And if you want the same width on medium and large screens, you only need to specify the medium class.
However, if you only use medium and/or large classes, the width will always transform to 100% on small screens.
Note: The number of columns should always add up to 12 for each row (6+6, 3+3+6, 9+3, etc)!
Two Equal Columns
Two equal-width columns (50%/50%) on all screen sizes:
s6
s6
Example
<div class="subhodaya-col s6 subhodaya-green subhodaya-center"><p>s6</p></div>
<div class="subhodaya-col s6 subhodaya-dark-grey subhodaya-center"><p>s6</p></div>
</div>
Two Unequal Columns
Two columns of unequal width (25%/75%) on all screen sizes:
s3
s9
Example
<div class="subhodaya-col s3 subhodaya-green subhodaya-center"><p>s6</p></div>
<div class="subhodaya-col s9 subhodaya-dark-grey subhodaya-center"><p>s6</p></div>
</div>
Three Equal Columns
Three equal-width columns (33.3%/33.3%/33.3%) on all screen sizes:
s4
s4
s4
Example
<div class="subhodaya-col s4 subhodaya-green subhodaya-center"><p>s4</p></div>
<div class="subhodaya-col s4 subhodaya-dark-grey subhodaya-center"><p>s4</p></div>
<div class="subhodaya-col s4 subhodaya-red subhodaya-center"><p>s4</p></div>
</div>
Three Unequal Columns
Three various-width columns (25%/50%/25%) on tablets, laptops and desktops. On mobile phones, the columns will automatically stack (100% width):
m3
m6
m3
Example
<div class="subhodaya-col m3 subhodaya-green subhodaya-center"><p>m3</p></div>
<div class="subhodaya-col m6 subhodaya-dark-grey subhodaya-center"><p>m6</p></div>
<div class="subhodaya-col m3 subhodaya-red subhodaya-center"><p>m3</p></div>
</div>
Note: This example is the same as using subhodaya-quarter (m3), subhodaya-half (m6), subhodaya-quarter (m3), which you learned in the subhodaya.css Responsive chapter.
Six Columns
Six equal-width columns (16% each) on tablets, laptops and desktops. On mobile phones, the columns will automatically stack (100% width):
m2
m2
m2
m2
m2
m2
Example
<div class="subhodaya-col m2 subhodaya-green subhodaya-center"><p>m2</p></div>
<div class="subhodaya-col m2 subhodaya-red subhodaya-center"><p>m2</p></div>
<div class="subhodaya-col m2 subhodaya-blue subhodaya-center"><p>m2</p></div>
<div class="subhodaya-col m2 subhodaya-dark-grey subhodaya-center"><p>m2</p></div>
<div class="subhodaya-col m2 subhodaya-black subhodaya-center"><p>m2</p></div>
<div class="subhodaya-col m2 subhodaya-purple subhodaya-center"><p>m2</p></div>
</div>
Mixed: Mobile and Laptops
You can combine classes to create a dynamic and flexible layout. This example will produce a two column layout with a 83.34%/16.66% (l8, l4) split on large screens and a 50%/50% (s6, s6) split on small screens:
l8 s6
l4 s6
Example
<div class="subhodaya-col l8 s6 subhodaya-pink subhodaya-center"><p>l8 s6</p></div>
<div class="subhodaya-col l4 s6 subhodaya-dark-grey subhodaya-center"><p>l4 s6</p></div>
</div>
Mixed: Mobile, Tablets and Laptops
This example will produce a three column layout with a 25%/58.34%/16.66% (l3, l7, l2) split on large screens, 50%/25%/25% (m6, m3, m3) split on medium screens and a 33.3%/33.3%/33.3% (s4, s4, s4)split on small screens:
l3 m6 s4
l7 m3 s4
l2 m3 s4
Example
<div class="subhodaya-col l9 m6 s4 subhodaya-green subhodaya-center"><p>l8 s6</p></div>
<div class="subhodaya-col l2 m3 s4 subhodaya-dark-grey subhodaya-center"><p>l4 s6</p></div>
<div class="subhodaya-col l1 m3 s4 subhodaya-red subhodaya-center"><p>l4 s6</p></div>
</div>
Difference between subhodaya-row and subhodaya-row-padding
The TheBestTutorials-row class defines a padded-less container, while the TheBestTutorials-row-padding class adds a 8px left and right padding to each column:
TheBestTutorials-row:
TheBestTutorials-row-padding:
Example
<div class="subhodaya-col s4"><img src="img_lights.jpg"></div>
<div class="subhodaya-col s4"><img src="img_nature.jpg"></div>
<div class="subhodaya-col s4"><img src="img_fjords.jpg"></div>
</div>
<div class="subhodaya-row-padding">
<div class="subhodaya-col s4"><img src="img_lights.jpg"></div>
<div class="subhodaya-col s4"><img src="img_nature.jpg"></div>
<div class="subhodaya-col s4"><img src="img_fjords.jpg"></div>
</div>
Using TheBestTutorials-rest
The TheBestTutorials-rest class is a powerful and flexible class that will use what's left of the grid column.
150px
rest
75px
rest
100px
100px
rest
quarter
80px
rest
quarter
quarter
quarter
35%
rest
Example using rest
<div class="subhodaya-col" style="width:150px"><p>150px</p></div>
<div class="subhodaya-rest"><p>rest</p></div>
</div>
Using Percent
Use the CSS width property to determine a specific width of the columns.
20%
60%
20%
45%
55%
15%
35%
10%
30%
10%
Example
<div class="subhodaya-col subhodaya-container subhodaya-green" style="width:20%"><p>20%</p></div>
<div class="subhodaya-col subhodaya-container subhodaya-blue" style="width:60%"><p>60%</p></div>
<div class="subhodaya-col subhodaya-container subhodaya-red" style="width:20%"><p>20%</p></div>
</div>