.grid-template { display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr; display: -ms-grid; -ms-grid-columns: 1fr; -ms-grid-rows: 1fr; margin-left: auto; margin-right: auto; }
/* Grid cols definition */
.grid-template[data-grid_cols="1"] { grid-template-columns: 1fr; -ms-grid-columns: 1fr; }
.grid-template[data-grid_cols="2"] { grid-template-columns: repeat(2,1fr); -ms-grid-columns: (1fr)[2]; }
.grid-template[data-grid_cols="3"] { grid-template-columns: repeat(3,1fr); -ms-grid-columns: (1fr)[3]; }
.grid-template[data-grid_cols="4"] { grid-template-columns: repeat(4,1fr); -ms-grid-columns: (1fr)[4]; }
.grid-template[data-grid_cols="5"] { grid-template-columns: repeat(5,1fr); -ms-grid-columns: (1fr)[5]; }
.grid-template[data-grid_cols="6"] { grid-template-columns: repeat(6,1fr); -ms-grid-columns: (1fr)[6]; }
.grid-template[data-grid_cols="7"] { grid-template-columns: repeat(7,1fr); -ms-grid-columns: (1fr)[7]; }
.grid-template[data-grid_cols="8"] { grid-template-columns: repeat(8,1fr); -ms-grid-columns: (1fr)[8]; }
.grid-template[data-grid_cols="9"] { grid-template-columns: repeat(9,1fr); -ms-grid-columns: (1fr)[9]; }
.grid-template[data-grid_cols="10"] { grid-template-columns: repeat(10,1fr); -ms-grid-columns: (1fr)[10]; }
/* Grid rows definition - Pose problème pour la hauter des grilles (même avec ' grid-auto-rows: minmax(10px, auto);' sur .gris-template) => à optimiser
.grid-template[data-grid_rows="1"] { grid-template-rows: 1fr; -ms-grid-rows: 1fr; }
.grid-template[data-grid_rows="2"] { grid-template-rows: repeat(2,1fr); -ms-grid-rows: (1fr)[2]; }
.grid-template[data-grid_rows="3"] { grid-template-rows: repeat(3,1fr); -ms-grid-rows: (1fr)[3]; }
.grid-template[data-grid_rows="4"] { grid-template-rows: repeat(4,1fr); -ms-grid-rows: (1fr)[4]; }
.grid-template[data-grid_rows="5"] { grid-template-rows: repeat(5,1fr); -ms-grid-rows: (1fr)[5]; }
.grid-template[data-grid_rows="6"] { grid-template-rows: repeat(6,1fr); -ms-grid-rows: (1fr)[6]; }
.grid-template[data-grid_rows="7"] { grid-template-rows: repeat(7,1fr); -ms-grid-rows: (1fr)[7]; }
.grid-template[data-grid_rows="8"] { grid-template-rows: repeat(8,1fr); -ms-grid-rows: (1fr)[8]; }
.grid-template[data-grid_rows="9"] { grid-template-rows: repeat(9,1fr); -ms-grid-rows: (1fr)[9]; }
.grid-template[data-grid_rows="10"] { grid-template-rows: repeat(10,1fr); -ms-grid-rows: (1fr)[10]; }*/
/* Grid elem x position */
.grid-template [data-grid_x="1"] { -ms-grid-column: 1; grid-column-start: 1; }
.grid-template [data-grid_x="2"] { -ms-grid-column: 2; grid-column-start: 2; }
.grid-template [data-grid_x="3"] { -ms-grid-column: 3; grid-column-start: 3; }
.grid-template [data-grid_x="4"] { -ms-grid-column: 4; grid-column-start: 4; }
.grid-template [data-grid_x="5"] { -ms-grid-column: 5; grid-column-start: 5; }
.grid-template [data-grid_x="6"] { -ms-grid-column: 6; grid-column-start: 6; }
.grid-template [data-grid_x="7"] { -ms-grid-column: 7; grid-column-start: 7; }
.grid-template [data-grid_x="8"] { -ms-grid-column: 8; grid-column-start: 8; }
.grid-template [data-grid_x="9"] { -ms-grid-column: 9; grid-column-start: 9; }
.grid-template [data-grid_x="10"] { -ms-grid-column: 10; grid-column-start: 10; }
/* Grid elem y position */
.grid-template [data-grid_y="1"] { -ms-grid-row: 1; grid-row-start: 1; }
.grid-template [data-grid_y="2"] { -ms-grid-row: 2; grid-row-start: 2; }
.grid-template [data-grid_y="3"] { -ms-grid-row: 3; grid-row-start: 3; }
.grid-template [data-grid_y="4"] { -ms-grid-row: 4; grid-row-start: 4; }
.grid-template [data-grid_y="5"] { -ms-grid-row: 5; grid-row-start: 5; }
.grid-template [data-grid_y="6"] { -ms-grid-row: 6; grid-row-start: 6; }
.grid-template [data-grid_y="7"] { -ms-grid-row: 7; grid-row-start: 7; }
.grid-template [data-grid_y="8"] { -ms-grid-row: 8; grid-row-start: 8; }
.grid-template [data-grid_y="9"] { -ms-grid-row: 9; grid-row-start: 9; }
.grid-template [data-grid_y="10"] { -ms-grid-row: 10; grid-row-start: 10; }

/* Grid elem width 2 */
.grid-template [data-grid_w="2"] { -ms-grid-column-span: 2; grid-column: 1 / span 2; }
/* Grid elem width 2 for x position */
.grid-template [data-grid_w="2"][data-grid_x="2"] { grid-column: 2 / span 2; }
.grid-template [data-grid_w="2"][data-grid_x="3"] { grid-column: 3 / span 2; }
.grid-template [data-grid_w="2"][data-grid_x="4"] { grid-column: 4 / span 2; }
.grid-template [data-grid_w="2"][data-grid_x="5"] { grid-column: 5 / span 2; }
.grid-template [data-grid_w="2"][data-grid_x="6"] { grid-column: 6 / span 2; }
.grid-template [data-grid_w="2"][data-grid_x="7"] { grid-column: 7 / span 2; }
.grid-template [data-grid_w="2"][data-grid_x="8"] { grid-column: 8 / span 2; }
.grid-template [data-grid_w="2"][data-grid_x="9"] { grid-column: 9 / span 2; }
/* Grid elem width 3 */
.grid-template [data-grid_w="3"] { -ms-grid-column-span: 3; grid-column: 1 / span 3; }
/* Grid elem width 3 for x position */
.grid-template [data-grid_w="3"][data-grid_x="2"] { grid-column: 2 / span 3; }
.grid-template [data-grid_w="3"][data-grid_x="3"] { grid-column: 3 / span 3; }
.grid-template [data-grid_w="3"][data-grid_x="4"] { grid-column: 4 / span 3; }
.grid-template [data-grid_w="3"][data-grid_x="5"] { grid-column: 5 / span 3; }
.grid-template [data-grid_w="3"][data-grid_x="6"] { grid-column: 6 / span 3; }
.grid-template [data-grid_w="3"][data-grid_x="7"] { grid-column: 7 / span 3; }
.grid-template [data-grid_w="3"][data-grid_x="8"] { grid-column: 8 / span 3; }
/* Grid elem width 4 */
.grid-template [data-grid_w="4"] { -ms-grid-column-span: 4; grid-column: 1 / span 4; }
/* Grid elem width 4 for x position */
.grid-template [data-grid_w="4"][data-grid_x="2"] { grid-column: 2 / span 4; }
.grid-template [data-grid_w="4"][data-grid_x="3"] { grid-column: 3 / span 4; }
.grid-template [data-grid_w="4"][data-grid_x="4"] { grid-column: 4 / span 4; }
.grid-template [data-grid_w="4"][data-grid_x="5"] { grid-column: 5 / span 4; }
.grid-template [data-grid_w="4"][data-grid_x="6"] { grid-column: 6 / span 4; }
.grid-template [data-grid_w="4"][data-grid_x="7"] { grid-column: 7 / span 4; }
/* Grid elem width 5 */
.grid-template [data-grid_w="5"] { -ms-grid-column-span: 5; grid-column: 1 / span 5; }
/* Grid elem width 5 for x position */
.grid-template [data-grid_w="5"][data-grid_x="2"] { grid-column: 2 / span 5; }
.grid-template [data-grid_w="5"][data-grid_x="3"] { grid-column: 3 / span 5; }
.grid-template [data-grid_w="5"][data-grid_x="4"] { grid-column: 4 / span 5; }
.grid-template [data-grid_w="5"][data-grid_x="5"] { grid-column: 5 / span 5; }
.grid-template [data-grid_w="5"][data-grid_x="6"] { grid-column: 6 / span 5; }
/* Grid elem width 6 */
.grid-template [data-grid_w="6"] { -ms-grid-column-span: 6; grid-column: 1 / span 6; }
/* Grid elem width 6 for x position */
.grid-template [data-grid_w="6"][data-grid_x="2"] { grid-column: 2 / span 6; }
.grid-template [data-grid_w="6"][data-grid_x="3"] { grid-column: 3 / span 6; }
.grid-template [data-grid_w="6"][data-grid_x="4"] { grid-column: 4 / span 6; }
.grid-template [data-grid_w="6"][data-grid_x="5"] { grid-column: 5 / span 6; }
/* Grid elem width 7 */
.grid-template [data-grid_w="7"] { -ms-grid-column-span: 7; grid-column: 1 / span 7; }
/* Grid elem width 7 for x position */
.grid-template [data-grid_w="7"][data-grid_x="2"] { grid-column: 2 / span 7; }
.grid-template [data-grid_w="7"][data-grid_x="3"] { grid-column: 3 / span 7; }
.grid-template [data-grid_w="7"][data-grid_x="4"] { grid-column: 4 / span 7; }
/* Grid elem width 8 */
.grid-template [data-grid_w="8"] { -ms-grid-column-span: 8; grid-column: 1 / span 8; }
/* Grid elem width 8 for x position */
.grid-template [data-grid_w="8"][data-grid_x="2"] { grid-column: 2 / span 8; }
.grid-template [data-grid_w="8"][data-grid_x="3"] { grid-column: 3 / span 8; }
/* Grid elem width 9 */
.grid-template [data-grid_w="9"] { -ms-grid-column-span: 9; grid-column: 1 / span 9; }
/* Grid elem width 9 for x position */
.grid-template [data-grid_w="9"][data-grid_x="2"] { grid-column: 2 / span 9; }
/* Grid elem width 10 */
.grid-template [data-grid_w="10"] { -ms-grid-column-span: 10; grid-column: 1 / span 10; }

/* Grid elem height 2 */
.grid-template [data-grid_h="2"] { -ms-grid-row-span: 2; grid-row: 1 / span 2; }
/* Grid elem height 2 for y position */
.grid-template [data-grid_h="2"][data-grid_y="2"] { grid-row: 2 / span 2; }
.grid-template [data-grid_h="2"][data-grid_y="3"] { grid-row: 3 / span 2; }
.grid-template [data-grid_h="2"][data-grid_y="4"] { grid-row: 4 / span 2; }
.grid-template [data-grid_h="2"][data-grid_y="5"] { grid-row: 5 / span 2; }
.grid-template [data-grid_h="2"][data-grid_y="6"] { grid-row: 6 / span 2; }
.grid-template [data-grid_h="2"][data-grid_y="7"] { grid-row: 7 / span 2; }
.grid-template [data-grid_h="2"][data-grid_y="8"] { grid-row: 8 / span 2; }
.grid-template [data-grid_h="2"][data-grid_y="9"] { grid-row: 9 / span 2; }
/* Grid elem height 3 */
.grid-template [data-grid_h="3"] { -ms-grid-row-span: 3; grid-row: 1 / span 3; }
/* Grid elem height 3 for y position */
.grid-template [data-grid_h="3"][data-grid_y="2"] { grid-row: 2 / span 3; }
.grid-template [data-grid_h="3"][data-grid_y="3"] { grid-row: 3 / span 3; }
.grid-template [data-grid_h="3"][data-grid_y="4"] { grid-row: 4 / span 3; }
.grid-template [data-grid_h="3"][data-grid_y="5"] { grid-row: 5 / span 3; }
.grid-template [data-grid_h="3"][data-grid_y="6"] { grid-row: 6 / span 3; }
.grid-template [data-grid_h="3"][data-grid_y="7"] { grid-row: 7 / span 3; }
.grid-template [data-grid_h="3"][data-grid_y="8"] { grid-row: 8 / span 3; }
/* Grid elem height 4 */
.grid-template [data-grid_h="4"] { -ms-grid-row-span: 4; grid-row: 1 / span 4; }
/* Grid elem height 4 for y position */
.grid-template [data-grid_h="4"][data-grid_y="2"] { grid-row: 2 / span 4; }
.grid-template [data-grid_h="4"][data-grid_y="3"] { grid-row: 3 / span 4; }
.grid-template [data-grid_h="4"][data-grid_y="4"] { grid-row: 4 / span 4; }
.grid-template [data-grid_h="4"][data-grid_y="5"] { grid-row: 5 / span 4; }
.grid-template [data-grid_h="4"][data-grid_y="6"] { grid-row: 6 / span 4; }
.grid-template [data-grid_h="4"][data-grid_y="7"] { grid-row: 7 / span 4; }
/* Grid elem height 5 */
.grid-template [data-grid_h="5"] { -ms-grid-row-span: 5; grid-row: 1 / span 5; }
/* Grid elem height 5 for y position */
.grid-template [data-grid_h="5"][data-grid_y="2"] { grid-row: 2 / span 5; }
.grid-template [data-grid_h="5"][data-grid_y="3"] { grid-row: 3 / span 5; }
.grid-template [data-grid_h="5"][data-grid_y="4"] { grid-row: 4 / span 5; }
.grid-template [data-grid_h="5"][data-grid_y="5"] { grid-row: 5 / span 5; }
.grid-template [data-grid_h="5"][data-grid_y="6"] { grid-row: 6 / span 5; }
/* Grid elem height 6 */
.grid-template [data-grid_h="6"] { -ms-grid-row-span: 6; grid-row: 1 / span 6; }
/* Grid elem height 6 for y position */
.grid-template [data-grid_h="6"][data-grid_y="2"] { grid-row: 2 / span 6; }
.grid-template [data-grid_h="6"][data-grid_y="3"] { grid-row: 3 / span 6; }
.grid-template [data-grid_h="6"][data-grid_y="4"] { grid-row: 4 / span 6; }
.grid-template [data-grid_h="6"][data-grid_y="5"] { grid-row: 5 / span 6; }
/* Grid elem height 7 */
.grid-template [data-grid_h="7"] { -ms-grid-row-span: 7; grid-row: 1 / span 7; }
/* Grid elem height 7 for y position */
.grid-template [data-grid_h="7"][data-grid_y="2"] { grid-row: 2 / span 7; }
.grid-template [data-grid_h="7"][data-grid_y="3"] { grid-row: 3 / span 7; }
.grid-template [data-grid_h="7"][data-grid_y="4"] { grid-row: 4 / span 7; }
/* Grid elem height 8 */
.grid-template [data-grid_h="8"] { -ms-grid-row-span: 8; grid-row: 1 / span 8; }
/* Grid elem height 8 for y position */
.grid-template [data-grid_h="8"][data-grid_y="2"] { grid-row: 2 / span 8; }
.grid-template [data-grid_h="8"][data-grid_y="3"] { grid-row: 3 / span 8; }
/* Grid elem height 9 */
.grid-template [data-grid_h="9"] { -ms-grid-row-span: 9; grid-row: 1 / span 9; }
/* Grid elem height 9 for y position */
.grid-template [data-grid_h="9"][data-grid_y="2"] { grid-row: 2 / span 9; }
/* Grid elem height 10 */
.grid-template [data-grid_h="10"] { -ms-grid-row-span: 10; grid-row: 1 / span 10; }

/* Grid elem styles */
.grid-template > div { min-width: 0; }
.grid-template img { max-width: 100%; }