Skip to main content
File

.grid-basic { display: -ms-grid; display: grid; -ms-grid-columns: 1fr 30px 1fr 30px 1fr; grid-template-columns: 1fr 1fr 1fr; -ms-grid-rows: auto; grid-template-rows: auto; grid-gap: 30px;}.grid-basic > *:nth-child(1) { -ms-grid-row: 1; -ms-grid-column: 1;}.grid-basic > *:nth-child(2) { -ms-grid-row: 1; -ms-grid-column: 3;}.grid-basic > *:nth-child(3) { -ms-grid-row: 1; -ms-grid-column: 5;}
/* Must work with repeat function */.grid-repeat { display: -ms-grid; display: grid; -ms-grid-columns: 1fr 30px 2fr 30px 1fr 30px 2fr 30px 1fr 30px 2fr 30px 1fr 30px 2fr; grid-template-columns: repeat(4, 1fr 2fr); -ms-grid-rows: auto 30px auto; grid-template-rows: repeat(2, auto); grid-gap: 30px;}.grid-repeat > *:nth-child(1) { -ms-grid-row: 1; -ms-grid-column: 1;}.grid-repeat > *:nth-child(2) { -ms-grid-row: 1; -ms-grid-column: 3;}.grid-repeat > *:nth-child(3) { -ms-grid-row: 1; -ms-grid-column: 5;}.grid-repeat > *:nth-child(4) { -ms-grid-row: 1; -ms-grid-column: 7;}.grid-repeat > *:nth-child(5) { -ms-grid-row: 3; -ms-grid-column: 1;}.grid-repeat > *:nth-child(6) { -ms-grid-row: 3; -ms-grid-column: 3;}.grid-repeat > *:nth-child(7) { -ms-grid-row: 3; -ms-grid-column: 5;}.grid-repeat > *:nth-child(8) { -ms-grid-row: 3; -ms-grid-column: 7;}
/* Complex case */.grid-complex { display: -ms-grid; display: grid; -ms-grid-columns: 1fr 5px minmax(100px, 200px) 5px minmax(100px, 200px) 5px 1fr; grid-template-columns: 1fr repeat(2, minmax(100px, 200px)) 1fr; -ms-grid-rows: 100px 30px auto 30px auto; grid-template-rows: 100px repeat(2, auto); grid-gap: 30px 5px;}.grid-complex > *:nth-child(1) { -ms-grid-row: 1; -ms-grid-column: 1;}.grid-complex > *:nth-child(2) { -ms-grid-row: 1; -ms-grid-column: 3;}.grid-complex > *:nth-child(3) { -ms-grid-row: 1; -ms-grid-column: 5;}.grid-complex > *:nth-child(4) { -ms-grid-row: 1; -ms-grid-column: 7;}.grid-complex > *:nth-child(5) { -ms-grid-row: 3; -ms-grid-column: 1;}.grid-complex > *:nth-child(6) { -ms-grid-row: 3; -ms-grid-column: 3;}.grid-complex > *:nth-child(7) { -ms-grid-row: 3; -ms-grid-column: 5;}.grid-complex > *:nth-child(8) { -ms-grid-row: 3; -ms-grid-column: 7;}.grid-complex > *:nth-child(9) { -ms-grid-row: 5; -ms-grid-column: 1;}.grid-complex > *:nth-child(10) { -ms-grid-row: 5; -ms-grid-column: 3;}.grid-complex > *:nth-child(11) { -ms-grid-row: 5; -ms-grid-column: 5;}.grid-complex > *:nth-child(12) { -ms-grid-row: 5; -ms-grid-column: 7;}
/* Must work inside media */@media (min-width: 400px) { .grid-media { display: -ms-grid; display: grid; -ms-grid-columns: 1fr 30px 1fr 30px 1fr; grid-template-columns: 1fr 1fr 1fr; -ms-grid-rows: auto; grid-template-rows: auto; grid-gap: 30px; } .grid-media > *:nth-child(1) { -ms-grid-row: 1; -ms-grid-column: 1; } .grid-media > *:nth-child(2) { -ms-grid-row: 1; -ms-grid-column: 3; } .grid-media > *:nth-child(3) { -ms-grid-row: 1; -ms-grid-column: 5; }}
/* Must consider autoflow value */.grid-flow-column { display: -ms-grid; display: grid; grid-auto-flow: column; -ms-grid-columns: 1fr 30px 1fr 30px 1fr; grid-template-columns: 1fr 1fr 1fr; -ms-grid-rows: auto 30px auto; grid-template-rows: auto auto; grid-gap: 30px;}.grid-flow-column > *:nth-child(1) { -ms-grid-row: 1; -ms-grid-column: 1;}.grid-flow-column > *:nth-child(2) { -ms-grid-row: 3; -ms-grid-column: 1;}.grid-flow-column > *:nth-child(3) { -ms-grid-row: 1; -ms-grid-column: 3;}.grid-flow-column > *:nth-child(4) { -ms-grid-row: 3; -ms-grid-column: 3;}.grid-flow-column > *:nth-child(5) { -ms-grid-row: 1; -ms-grid-column: 5;}.grid-flow-column > *:nth-child(6) { -ms-grid-row: 3; -ms-grid-column: 5;}
/* Show warning if rows are not defined and dense value is used */.grid-warning-dense { grid-auto-flow: column dense; -ms-grid-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr;}
/* Show warning autoflow used without rows/columns */.grid-warning-autoflow { grid-auto-flow: column;}
.grid-autoplace-disabled { /* autoprefixer grid: no-autoplace */ -ms-grid-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr; -ms-grid-rows: auto; grid-template-rows: auto; grid-gap: 30px;}
.grid-autoplace-gap-warn { -ms-grid-columns: 1fr 30px 1fr 30px 1fr; grid-template-columns: 1fr 1fr 1fr; grid-gap: 30px;}