Responsive Flexible Grid
The grid has proven to work for smaller projects and as a viable tool for people learning CSS. It is very suitable when working without one of the all-inclusive major frameworks. Nevertheless, it's possible to use the grid in combination with a framework, as tested for example with Materialize.
The grid is using a 12-columns fluid responsive grid system.
It helps to layout your page in an ordered and responsive way for all screen sizes.
The gutter-space betweend the Element is 20px fixed width.
See below for how to use this file.
How to use this File
You can download only the grid file.
If you want to see the working grid, you can also download the mobile first Template
Container
The container class is not part of the grid but necessary for the layout. It allows you to center your page content. The container class is set to 95% for small devices and 90% if the screen-size is bigger than 980px. The max-width is set to 1280px. You can easily overwite or extend all parameters with your own style.css.
<div class="container">Container Element</div>
Rows around Columns
Columns are containd within rows. Add class col to the respective elements to turn them into columns.
Remember, a row is followed by columns which contain the content.
<div class="prtcl-row">
<div class="col">
<!-- your content -->
</div>
<div class="col">
<!-- your content -->
</div>
</div>
Fluid Grid
Without any definition of the width, the columns (col) shrink to the size of the content.
It will break to a new line if there is no more space for the next Element.
With column grow you can change how remaining space is treated.
See how this looks.
<div class="prtcl-row">
<div class="col">
<!-- your content -->
</div>
</div>
Spring Colors
Colors
Grid
Mobile first Tempate
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Column padding
Columns do not have any padding by default, so you can use them also for cards, galleries, videos etc.
Use the class="space" to add padding:20px to your col element.
.
<div class="prtcl-row">
<div class="col space">
<!-- your content -->
</div>
</div>
Spring Colors
Colors
Grid
12 Columns Grid
The grid.css is using a standard 12-columns fluid responsive grid system, that shrinks with the browser or device at smaller sizes. The max width can be changed with one line of CSS and all columns will be resized. The syntax is simple.
See how this works.
<div class="prtcl-row">
<div class="col s1"> 1 </div>
<div class="col s1"> 2 </div>
<div class="col s1"> 3 </div>
<div class="col s1"> 4 </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
Responsive Grid
In order to make your grid responsive and have variable sized columns based on the breakpoints, add a class with the screensize-prefix (s = small, m = medium, l = large) and the number of columns to the column-element. For example m6 for a six columns wide element at medium screen size.
s = small = 0 - 600px
m = medium = 601 - 980px
l = large = 980 - ~px
<div class="prtcl-row">
<div class="col s12 m6 l4">
<!-- your content -->
</div>
</div>
Responsive Grid Examples
<div class="prtcl-row">
<div class="col s12 m6 l4"> … </div>
<div class="col s12 m6 l4"> … </div>
<div class="col s12 m6 l4"> … </div>
<div class="col s12 m6"> … </div>
<div class="col s12 m6"> … </div>
<div class="col s12"> … </div>
</div>
s12
m6
l4
s12
m6
l4
s12
m6
l4
s12
m6
s12
m6
s12
Offset
To offset columns, add a class with the offset-prefix, screensize-prefix and the number of columns to move in. For example offset-s-4 for a 4-columns offset at small screen size.
<div class="col offset-s11 s1"> Element with offset</div>
<div class="col offset-s10 s2"> Element with offset</div>
1
2
5
8
11
Offset and responsive Examples
Read the code to see how this works.
<div class="col s12 offset-m2 m4 offset-l3 l3">1</div> <div class="col s12 offset-m2 m4 offset-l3 l3">2</div> <div class="col s6 m4 l3 grey-2">3</div> <div class="col s6 offset-m2 m4 offset-l3 l3">4</div>
1
2
3
4
Column Grow
By default responsive grid columns will not grow beyond their defined column-size, e.g. to make up the width of missing columns.
<div class="prtcl-row"> <div class="col s4">1</div> <div class="col s4">2</div> <div class="col s4">3</div> <div class="col s4">4</div> <div class="col s4">5</div> </div>
1
2
3
4
5
To allow columns to grow beyond the defined column-size just add the class grow to the row element.
If all column-elements have the grow (flex-grow) properties, emaining space in a row will be distributed equally among all columns.
<div class="prtcl-row grow"> <div class="col s4">1</div> <div class="col s4">2</div> <div class="col s4">3</div> <div class="col s4">4</div> <div class="col s4">5</div> </div>
1
2
3
4
5
If you want to allow only the last column to grow, just add the class grow once to the respective colum-element. See, it will start to grow.
<div class="prtcl-row grow"> <div class="col s4">1</div> <div class="col s4">2</div> <div class="col s4">3</div> <div class="col s4">4</div> <div class="col s4 grow">5</div> </div>
1
2
3
4
5
Reverse columns and direction
To change direction of columns add the class reverse to the row element.
This changes the direction of all column items to reverse order.
default: left to right
reverse: right to left
<div class="prtcl-row reverse"> <div class="col s4">1</div> <div class="col s4">2</div> <div class="col s4">3</div> </div>
1
2
3
To change the direction of the columns and reverse their order, add the class col-reverse to the row element.
<div class="prtcl-row col-reverse"> <div class="col s12">1</div> <div class="col s12">2</div> <div class="col s12">3</div> </div>
1
2
3
Nested responsive grids
Nest grid inside a grid inside a grid - as many time it works for you.
Don't forget to make sure that all columns are contained inside a row.
<div class="prtcl-row"> <div class="col s12 l6"> <div class="prtcl-row"> <div class="col s6"> 1 </div> <div class="col s6"> 2 </div> </div> </div> </div>
<div class="prtcl-row"> <div class="col s12 l6"> <div class="prtcl-row"> <div class="col s12 l6"> 1 </div> <div class="col s12 l6"> 2 </div> <div class="col s12 l6"> 3 </div> </div> </div> </div>
1
2
1
2
3
If you work with the fluid grid, the columns will shrink to the size of it's content.
If you want them to grow, just add the class grow to the row element.
With all column-elements having grow, the remaining space in a row is distributed equally.
<div class="prtcl-row grow"> <div class="col s12 l6"> <div class="prtcl-row"> <div class="col"> 1 </div> <div class="col"> 2 </div> <div class="col"> 3 </div> </div> </div> </div>
1
2
1
2
3