Grid 12

    Width columns classes

    DefaultSmallMediumLargeExtra Large
    Estimated Screen Phones Smartphones Tablet portrait Tablet landscape Desktops
    Width All min-width: 640px min-width: 768px min-width: 1024px min-width: 1280px
    Class Names w-100 sm:w-1
    sm:w-2
    sm:w-3
    sm:w-4
    sm:w-5
    sm:w-6
    sm:w-7
    sm:w-8
    sm:w-9
    sm:w-10
    sm:w-11
    sm:w-12    		 md:w-1
    md:w-2
    md:w-3
    md:w-4
    md:w-5
    md:w-6
    md:w-7
    md:w-8
    md:w-9
    md:w-10
    md:w-11
    md:w-12    		 lg:w-1
    lg:w-2
    lg:w-3
    lg:w-4
    lg:w-5
    lg:w-6
    lg:w-7
    lg:w-8
    lg:w-9
    lg:w-10
    lg:w-11
    lg:w-12    		 xl:w-1
    xl:w-2
    xl:w-3
    xl:w-4
    xl:w-5
    xl:w-6
    xl:w-7
    xl:w-8
    xl:w-9
    xl:w-10
    xl:w-11
    xl:w-12

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

    Media Queries Used

    /* Media Queries used for mobile first device size classes */ Without @media is for smallest screens. 
     /* Small screens (sm) For smartphone Classes */ @media only screen and (min-width: 640px) { } 
     
     /* Medium screens (md) For tablet portrait Classes */ @media only screen and (min-width: 768px) { } 
     
     /* Large screens (lg) For tablet landscape Classes */ @media only screen and (min-width: 1024px) { } 
     
     /* Extra Large screens (xl) For desktop Classes */ @media only screen and (min-width: 1280px) { }

    © 2026 6i Demo

    Webdesign & Realisatie in 0.1421: 6i