.grid { display: grid; grid-gap: 5px; /*marges entre box*/ max-width: 100%; grid-template-columns: repeat(12, 1fr); /* fond blanc background-color: #fff;*/ color: #444; padding-bottom: 20px; margin-left: 40px; /*décalage à gauche retrait du soustritre plus joli*/ /*marge de 15px avant le h2 espace entre chaque bloc*/ border-radius: 10px; /* arrondi de la grille globale*/ } /*box*/ .grid>div { padding: 10px; /*marge à l'intérieur de la box*/ background-color: #fff; border-radius: 7px; /* dé&calage à gauche pour les sous titres*/ } /*couleur de fond on laisse les couleurs des fonds */ .fondreset { background: white !important; } .fond1 { background-color: rgb(222, 213, 198); } .fond2 { background-color: rgb(245, 121, 121); } .fond3 { background-color: antiquewhite; } /******** version ou on enlève les fonds background-color et les bordures border le css de production la base que tu enrichies Ce fichier Grille.css montre le contenu de la verison compressée Grille.min.css que l'on met en production ***** */ /*1 rangée de 12 col pour le titre par exemple*/ .col1 { grid-column: span 12; margin-bottom: 15px; /* background-color: rgb(197, 237, 190); border-radius: 15px;*/ } .col1a { grid-column: span 12; } /* rangée habituelle 2col +10 col =12 col*/ .col2 { grid-column: span 2; /*2col*/ /* enlever les bodure et couleur de fond si tu veux background-color: rgb(248, 246, 250); border: 2px solid red;*/ } .col2a { grid-column: span 10; /*10 col background-color: rgb(248, 246, 250); border: 2px solid red;*/ } /* rangée habituelle 2col +10 col =12 col*/ .col3a { grid-column: span 3; /*2col*/ /* enlever les bodure et couleur de fond si tu veux background-color: rgb(248, 246, 250); border: 2px solid red;*/ } .col3b { grid-column: span 9; /*10 col background-color: rgb(248, 246, 250); border: 2px solid red;*/ } /* voir header titre et 1 photo de chaque coté */ .col3headerG { grid-column: span 2; /*2col*/ /* enlever les bodure et couleur de fond si tu veux background-color: rgb(233, 227, 239); border: 2px solid red;*/ } /* case du milieu du footer */ .col3headerM { margin-top: 20px; grid-column: span 8; /*10 col background-color: rgb(222, 235, 152); border: 2px solid red;*/ } .col3headerD { grid-column: span 2; /*10 col background-color: rgb(247, 224, 244); border: 2px solid red;*/ } /* voir footer */ /* rangée habituelle voir footer 2col +8col + 2col = 12col*/ .col3footerG { grid-column: span 2; /*2col*/ /* enlever les bodure et couleur de fond si tu veux background-color: rgb(233, 227, 239); border: 2px solid red;*/ } /* case du milieu du footer */ .col3footerM { margin-top: 20px; grid-column: span 8; /*10 col background-color: rgb(222, 235, 152); border: 2px solid red;*/ } .col3footerD { grid-column: span 2; /*10 col background-color: rgb(247, 224, 244); border: 2px solid red;*/ } /* rangée de 3col 3x4col=12 */ .col3 { grid-column: auto / span 4; /* background-color: rgb(234, 215, 187);*/ } /* rangée de 4col 4x3col=12 */ .col4 { grid-column: auto / span 3; /* background-color: rgb(234, 215, 187);*/ } /* rangée de 4col 4x3col=12 */ .col4a { grid-column: auto / span 3; gap: 0 0; margin: 0; padding: 0; } /* rangée de 6col 2x6col=12 */ .col6 { grid-column: auto / span 6; /* grid-row: auto / span 3; si tu veux plusieurs rangées background-color: rgb(179, 185, 243);*/ } /*ombres sur les box*/ .boxOmbre { border: 1px solid; padding: 10px; box-shadow: 5px 10px #888888; } .boxOmbre1 { border: 1px solid; padding: 4px; box-shadow: 5px 10px 20px #888888; } /* bloc les uns sous les autres jusqu'à une largeur de 600px*/ @media only screen and (max-width: 600px) { .grid { grid-row: inherit; display: block; /* met les colonne les unes sous les autres petit écran */ margin-left: 5px; /*décalage à gauche retrait du soustritre plus joli*/ /*marge de 15px avant le h2 espace entre chaque bloc*/ } .grid>div { padding: 5px; /*marge à l'intérieur de la box*/ border-radius: 4px; /* dé&calage à gauche pour les sous titres*/ } }