Skip to main content
File
/*****************\ AREAS ALGORITHM\*****************/
.grid-template-areas { display: -ms-grid; display: grid; grid-template-areas: "a-conflict a-conflict" "b-conflict b-conflict";}
.grid-template-areas.conflict { display: -ms-grid; display: grid; grid-template-areas: "a-conflict" "b-conflict";}
.a { -ms-grid-row: 1; -ms-grid-column: 1; -ms-grid-column-span: 2; grid-area: a-conflict;}
.grid-template-areas.conflict > .a { -ms-grid-row: 1; -ms-grid-column: 1; -ms-grid-column-span: 1;}
.b { -ms-grid-row: 2; -ms-grid-column: 1; -ms-grid-column-span: 2; grid-area: b-conflict;}
.grid-template-areas.conflict > .b { -ms-grid-row: 2; -ms-grid-column: 1; -ms-grid-column-span: 1;}
.grid-template { -ms-grid-rows: 30px 1fr 30px; -ms-grid-columns: 120px (250px 10px)[4]; grid-template: [header-left] "head head" 30px [header-right] [main-left] "nav main" 1fr [main-right] [footer-left] "nav foot" 30px [footer-right] / 120px repeat(4, 250px 10px);}
@media (min-width: 1000px) { .grid-template { -ms-grid-rows: 30px auto 1fr 30px; -ms-grid-columns: 1fr; grid-template: [header-left] "head" 30px [header-right] [nav-left] "nav" auto [nav-right] [main-left] "main" 1fr [main-right] [footer-left] "foot" 30px [footer-right] / 1fr; }}
.grid-template.conflict { -ms-grid-rows: auto 20px auto; -ms-grid-columns: 1fr 1fr; grid-template: "head head" "nav main" 20px "nav foot" / 1fr 1fr;}
.head { -ms-grid-row: 1; -ms-grid-column: 1; -ms-grid-column-span: 2; grid-area: head;}
.grid-template.conflict > .head { -ms-grid-row: 1; -ms-grid-column: 1; -ms-grid-column-span: 2;}
.main { -ms-grid-row: 2; -ms-grid-column: 2; grid-area: main;}
.grid-template.conflict > .main { -ms-grid-row: 2; -ms-grid-column: 2;}
.nav { -ms-grid-row: 2; -ms-grid-row-span: 2; -ms-grid-column: 1; grid-area: nav;}
.grid-template.conflict > .nav { -ms-grid-row: 2; -ms-grid-row-span: 2; -ms-grid-column: 1;}
.foot { -ms-grid-row: 3; -ms-grid-column: 2; grid-area: foot;}
.grid-template.conflict > .foot { -ms-grid-row: 3; -ms-grid-column: 2;}
@media (min-width: 1000px) { .head { -ms-grid-row: 1; -ms-grid-column: 1; -ms-grid-column-span: 1; } .main { -ms-grid-row: 3; -ms-grid-column: 1; } .nav { -ms-grid-row: 2; -ms-grid-row-span: 1; -ms-grid-column: 1; } .foot { -ms-grid-row: 4; -ms-grid-column: 1; }}
/*********************\ AUTOPLACE ALGORITHM\*********************/
.grid-autoplace { display: -ms-grid; display: grid; -ms-grid-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr; -ms-grid-rows: auto; grid-template-rows: auto; grid-gap: 30px;}