Grid 12

Grid columns Device width classes

	Small Phone	Phone	Tablet	Laptop	Desktop
Estimated Devices	Small Phones	Phones to Tablet size	Small Tablets Large Tablets Netbooks	Laptops small Desktops	Average to Large Desktops
Width	30em (480px) & lower	Below 48em (768px)	48 em (768px) & above	62 em (992px) & above	75em (1200px) & above
Class Names	grid-100	grid-1-phone grid-2-phone grid-3-phone grid-4-phone grid-5-phone grid-6-phone grid-7-phone grid-8-phone grid-9-phone grid-10-phone grid-11-phone grid-12-phone	grid-1-tablet grid-2-tablet grid-3-tablet grid-4-tablet grid-5-tablet grid-6-tablet grid-7-tablet grid-8-tablet grid-9-tablet grid-10-tablet grid-11-tablet grid-12-tablet	grid-1-laptop grid-2-laptop grid-3-laptop grid-4-laptop grid-5-laptop grid-6-laptop grid-7-laptop grid-8-laptop grid-9-laptop grid-10-laptop grid-11-laptop grid-12-laptop	grid-1-desktop grid-2-desktop grid-3-desktop grid-4-desktop grid-5-desktop grid-6-desktop grid-7-desktop grid-8-desktop grid-9-desktop grid-10-desktop grid-11-desktop grid-12-desktop

All grid columns classes have a padding of 0.65em(10 px) each side.

Media Queries Used

/* Media Queries used for mobile first device size classes */
    
/* For phone classes */
@media only screen { } /* For mobile styles */

/* For Tablet Classes */
@media only screen and (min-width: 48em) { } /* min-width 768px for Tablet styles */

/* For Laptop Classes */
@media only screen and (min-width: 62em) { } /* min-width 992px for laptop to small desktop styles /*
    
/* For Desktop Classes */
@media only screen and (min-width: 75em) { } /* min-width 1200px medium to large Desktop styles /*

/* Others Media Queries used for devices with min and max used with show and hide classes*/

@media only screen and (max-width: 47.938em) { } /* Up to 767px */
 
@media only screen and (min-width: 48em) and (max-width: 61.938em) { } /* 768px to 991px */

@media only screen and (min-width: 62em) and (max-width: 74.938em) { } /*  992px to 1199px */

@media only screen and (min-width: 75em) { } /* 1200px and up */

/* Used to stack columns 30em and under with grid-100 */
@media only screen and (max-width: 30em){ } /* max-width 30em 480px */