Created
August 22, 2017 10:02
-
-
Save trkoch/b2540c94bffb7a2c75d6c46415d90133 to your computer and use it in GitHub Desktop.
CSS Grid Layout // source https://jsbin.com/naxiray
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width"> | |
| <title>CSS Grid Layout</title> | |
| <style id="jsbin-css"> | |
| .grid-layout { | |
| display: grid; | |
| grid-template-columns: repeat(12, 1fr); | |
| grid-template-rows: repeat(4, 1fr); | |
| grid-column-gap: 5px; | |
| grid-row-gap: 5px; | |
| } | |
| /* | |
| * By default the grid will take all horizontal space available. | |
| * Add `sm` to set a fixed width. | |
| */ | |
| .sm { | |
| width: 600px; | |
| } | |
| /* | |
| * Provide a height in relation to width | |
| */ | |
| .sm .grid-column { | |
| min-height: 200px; | |
| } | |
| /* | |
| * A column with a count of 1fr horizontally and vertically computes | |
| * to a box with outer width/height of 50px/200px, provided the total | |
| * width is set to `sm`. | |
| */ | |
| .grid-column { | |
| color: #fff; | |
| background-color: #555; | |
| box-sizing: border-box; | |
| } | |
| .col-count-3 { | |
| grid-column-end: span 3; | |
| } | |
| .col-count-4 { | |
| grid-column-end: span 4; | |
| } | |
| .col-count-5 { | |
| grid-column-end: span 5; | |
| } | |
| .col-count-9 { | |
| grid-column-end: span 9; | |
| } | |
| .row-count-1 { | |
| grid-row-end: span 1; | |
| } | |
| .row-count-2 { | |
| grid-row-end: span 2; | |
| } | |
| .row-count-3 { | |
| grid-row-end: span 3; | |
| } | |
| .row-count-4 { | |
| grid-row-end: span 4; | |
| } | |
| h1 { | |
| font-size: inherit; | |
| font-weight: bold; | |
| padding: 5px; | |
| } | |
| p { | |
| padding: 5px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="grid-layout sm"> | |
| <div class="grid-column col-count-4 row-count-1"> | |
| <h1>Trends</h1> | |
| <p>Lorem ipsum</p> | |
| </div> | |
| <div class="grid-column col-count-5 row-count-2"> | |
| Betty | |
| </div> | |
| <div class="grid-column col-count-3 row-count-1"> | |
| Superdry | |
| </div> | |
| <div class="grid-column col-count-4 row-count-1"> | |
| Athleisure | |
| </div> | |
| <div class="grid-column col-count-3 row-count-2"> | |
| Drykorn | |
| </div> | |
| <div class="grid-column col-count-9 row-count-1"> | |
| <h1>Athleisure</h1> | |
| <p>Lorem ipsum</p> | |
| </div> | |
| </div> | |
| <script id="jsbin-source-css" type="text/css">.grid-layout { | |
| display: grid; | |
| grid-template-columns: repeat(12, 1fr); | |
| grid-template-rows: repeat(4, 1fr); | |
| grid-column-gap: 5px; | |
| grid-row-gap: 5px; | |
| } | |
| /* | |
| * By default the grid will take all horizontal space available. | |
| * Add `sm` to set a fixed width. | |
| */ | |
| .sm { | |
| width: 600px; | |
| } | |
| /* | |
| * Provide a height in relation to width | |
| */ | |
| .sm .grid-column { | |
| min-height: 200px; | |
| } | |
| /* | |
| * A column with a count of 1fr horizontally and vertically computes | |
| * to a box with outer width/height of 50px/200px, provided the total | |
| * width is set to `sm`. | |
| */ | |
| .grid-column { | |
| color: #fff; | |
| background-color: #555; | |
| box-sizing: border-box; | |
| } | |
| .col-count-3 { | |
| grid-column-end: span 3; | |
| } | |
| .col-count-4 { | |
| grid-column-end: span 4; | |
| } | |
| .col-count-5 { | |
| grid-column-end: span 5; | |
| } | |
| .col-count-9 { | |
| grid-column-end: span 9; | |
| } | |
| .row-count-1 { | |
| grid-row-end: span 1; | |
| } | |
| .row-count-2 { | |
| grid-row-end: span 2; | |
| } | |
| .row-count-3 { | |
| grid-row-end: span 3; | |
| } | |
| .row-count-4 { | |
| grid-row-end: span 4; | |
| } | |
| h1 { | |
| font-size: inherit; | |
| font-weight: bold; | |
| padding: 5px; | |
| } | |
| p { | |
| padding: 5px; | |
| }</script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .grid-layout { | |
| display: grid; | |
| grid-template-columns: repeat(12, 1fr); | |
| grid-template-rows: repeat(4, 1fr); | |
| grid-column-gap: 5px; | |
| grid-row-gap: 5px; | |
| } | |
| /* | |
| * By default the grid will take all horizontal space available. | |
| * Add `sm` to set a fixed width. | |
| */ | |
| .sm { | |
| width: 600px; | |
| } | |
| /* | |
| * Provide a height in relation to width | |
| */ | |
| .sm .grid-column { | |
| min-height: 200px; | |
| } | |
| /* | |
| * A column with a count of 1fr horizontally and vertically computes | |
| * to a box with outer width/height of 50px/200px, provided the total | |
| * width is set to `sm`. | |
| */ | |
| .grid-column { | |
| color: #fff; | |
| background-color: #555; | |
| box-sizing: border-box; | |
| } | |
| .col-count-3 { | |
| grid-column-end: span 3; | |
| } | |
| .col-count-4 { | |
| grid-column-end: span 4; | |
| } | |
| .col-count-5 { | |
| grid-column-end: span 5; | |
| } | |
| .col-count-9 { | |
| grid-column-end: span 9; | |
| } | |
| .row-count-1 { | |
| grid-row-end: span 1; | |
| } | |
| .row-count-2 { | |
| grid-row-end: span 2; | |
| } | |
| .row-count-3 { | |
| grid-row-end: span 3; | |
| } | |
| .row-count-4 { | |
| grid-row-end: span 4; | |
| } | |
| h1 { | |
| font-size: inherit; | |
| font-weight: bold; | |
| padding: 5px; | |
| } | |
| p { | |
| padding: 5px; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment