Avancer entre les colonnes

 <!-- Les BOITES -->
<div class="grid-layout has-gutter">
    
    <!-- Une boite d'1/6 de largeur-->
    <div class="sixth has-bg-gray-xlight padded box">
        <h4>.sixth</h4>
        <p>Une boite de 1/6 de la largeur</p>
    </div>
    
    <!-- Une boite d'1/5 de largeur-->
    <div class="fifth padded has-bg-gray-xlight box">
        <h4>.fifth</h4>
        <p>Une boite de 1/5 de la largeur</p>
    </div>
    
    <!-- Une boite d'1/4 de largeur-->
    <div class="quarter padded has-bg-gray-xlight box">
        <h4>.quarter</h4>
        <p>Une boite de 1/4 de la largeur</p>
    </div>

    <!-- Une boite d'1/3 de largeur-->
    <div class="third padded has-bg-gray-xlight box">
        <h4>.third</h4>
        <p>Une boite de 1/3 de la largeur</p>
    </div>

    <!-- Une boite de la moitié (1/2) de la largeur-->
    <div class="half padded has-bg-gray-xlight box">
        <h4>.half</h4>
        <p>Une boite de la moitié de la largeur</p>
    </div>

    <!-- Une boite de 2/3 de la largeur-->
    <div class="two-third padded has-bg-gray-xlight box">
        <h4>.two-third</h4>
        <p>Une boite de 2/3 de la largeur</p>
    </div>

    <!-- Une boite de 3/4 de la largeur-->
    <div class="three-quarter padded has-bg-gray-xlight box">
        <h4>.three-quarter</h4>
        <p>Une boite de 3/4 de la largeur</p>
    </div>

    <!-- Une boite sur toute la largeur-->
    <div class="w100 padded has-bg-gray-xlight box">
        <h4>.w100</h4>
        <p>Une boite sur toute la largeur !</p>
    </div>
</div>
 

 /* 
 * Colonnes
 */


/**
*  => MISE EN PLACE ---
---------------------------- */
.simple-grid,
.double-grid,
.half,
.half-s,
.half-m,
.half-l,
.half-xl,
.half-xxl,
.third,
.third-s,
.third-m,
.third-l,
.third-xl,
.third-xxl,
.two-third,
.two-third-s,
.two-third-m,
.two-third-l,
.two-third-xl,
.two-third-xxl,
.quarter,
.quarter-s,
.quarter-m,
.quarter-l,
.quarter-xl,
.quarter-xxl,
.three-quarter,
.three-quarter-s,
.three-quarter-m,
.three-quarter-l,
.three-quarter-xxl,
.fifth,
.fifth-s,
.fifth-m,
.fifth-l,
.fifth-xl,
.sixth,
.sixth-s,
.sixth-m,
.sixth-l,
.sixth-xl {
	/* float: left; /* pour la compabilité avec .float-grid */
	/* position: relative; */ /* ? */
	width: 100%; /* par défaut ? */
}

/* SIXIEME */

.sixth,
.sixth-s {
	width: 16.6666667%; /* Sixième par défaut */
}


/* CINQUIEME */

.fifth,
.fifth-s {
	width: 20%;
}


/* QUART */

.quarter,
.quarter-s {
	width: 25%; /* Quart par défaut */
}

/* TIERS */
.third,
.third-s {
	width: 33.33%; /* Tiers par défaut */
}


/* MOITIE D'ECRAN */

.half,
.half-s,
.double-grid > * {
	width: 50%; /* moitié par défaut */
}

/* DEUX TIERS */

.two-third,
.two-third-s {
	width: 66.66%; /* Deux tiers par défaut */
}

/* TROIS-QUART */

.three-quarter,
.three-quarter-s{
    width: 75%; /* Trois-quart */
}


/* == MEDIA QUERIES == */

/* 1 : pour les SMARTPHONES en dessous de 600px */
@media screen and (max-width: $mq-small) {

    /* = ELEMENTS = */
    
    .half-s {
        width: 50%
    }

    /* une classe pour faire flotter un élémentà un tiers de la largeur */
    .third-s {
        width: 33.33%
    }

    .two-third-s {
        width: 66.66%;
    }

}

/* 2 : pour les TABLETTES (MEDIUM) à partir de 601px */
@media screen and (min-width: $mq-medium) {


    .three-quarter-m{
        width: 75%; /* Trois-quart */
    }

    .half-m {
        width: 50%;   /*moitié */
    }


    .quarter-m {
        width: 25%;  /*  quart */		
    }

    .third-m {
        width: 33.33%;  /*  tiers */
    }


    .two-third-m {
        width: 66.66%;  /*  deux tiers */
    }


    .sixth-m {
        width: 16.6666667%;  /*  sixième */
    }    
    
}

/* pour les LARGE SCREENS à partir de 1025px; */
@media screen and (min-width: $mq-large) {
    

    /* Une classe pour un affichage "fullscreen" ? */
    .fullscreen-l {
        width: 100%;
        height: 100vh;
    }
    
    .three-quarter-l{
        width: 75%; /* Trois-quart */
    }


    .half-l {
        width: 50%;  /* moitié */
    }

    .quarter-l {
        width: 25%;  /* quart */
    }


    .third-l {
        width: 33.33%;  /* tiers */
    }


    .two-third-l {
        width: 66.66%;  /* deux tiers */
    }

    .sixth-l {
        width: 16.6666667%;  /* sixième */
    }

 
        
}

/* XLARGE SCREENS à partir de 1280px */
@media screen and (min-width: $mq-xlarge) {

    /* = GRILLES = */

    .three-quarter-xl{
        width: 75%; /* Trois-quart */
    }

    .half-xl {
        width: 50%;  /* défaut */
    }

    .quarter-xl {
        width: 25%;  /* 25% */
    }	

    .third-xl {
        width: 33.33%;
    }

    .two-third-xl {
        width: 66.66%;
    }

    .sixth-xl {
        width: 16.6666667%;  /* sixième */
    }
    
    
}

/* XXLARGE SCREENS à partir de 1441px */
@media screen and (min-width: $mq-xxlarge) {

    .quarter-xxl {
        width: 25%;
    }
    
    .third-xxl {
        width: 33.33333333333%;  
    }
    
    .half-xxl {
        width: 50%;  
    }
    
    .two-third-xxl {
        width: 66.66666666666%;  
    }
    
    .seventy-xxl {
        width: 70%;  
    }
    
    .three-quarter-xxl {
        width: 75%;
    }
    
}