Created
January 25, 2019 01:28
-
-
Save sorie/28d02d67b18d8d62bcbf681cb9f76f2c to your computer and use it in GitHub Desktop.
JS Bin // source https://jsbin.com/togavod
This file contains hidden or 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>JS Bin</title> | |
| <style id="jsbin-css"> | |
| .wrapper { | |
| display: grid; | |
| grid-template-columns: 100px 1fr 1fr 100px; | |
| grid-template-rows: repeat(3, minmax(100px, max-content)); | |
| grid-gap: 10px; | |
| } | |
| .box { | |
| border: 1px solid pink; | |
| } | |
| .header { | |
| grid-column: 1 / 4; | |
| } | |
| .info { | |
| grid-column: 4 / 5; | |
| grid-row: 1 / 3; | |
| } | |
| .bio { | |
| grid-area: 3 / 2 / 4 / 5; | |
| } | |
| .photo { | |
| grid-area: 2 / 2 / 3 / 4; | |
| } | |
| .trophies { | |
| grid-row: 2 / -1; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="wrapper"> | |
| <div class="box header">header</div> | |
| <div class="box info">info</div> | |
| <div class="box bio">bio</div> | |
| <div class="box photo">photo</div> | |
| <div class="box trophies">trophies</div> | |
| </div> | |
| <script id="jsbin-source-css" type="text/css">.wrapper { | |
| display: grid; | |
| grid-template-columns: 100px 1fr 1fr 100px; | |
| grid-template-rows: repeat(3, minmax(100px, max-content)); | |
| grid-gap: 10px; | |
| } | |
| .box { | |
| border: 1px solid pink; | |
| } | |
| .header { | |
| grid-column: 1 / 4; | |
| } | |
| .info { | |
| grid-column: 4 / 5; | |
| grid-row: 1 / 3; | |
| } | |
| .bio { | |
| grid-area: 3 / 2 / 4 / 5; | |
| } | |
| .photo { | |
| grid-area: 2 / 2 / 3 / 4; | |
| } | |
| .trophies { | |
| grid-row: 2 / -1; | |
| }</script> | |
| </body> | |
| </html> |
This file contains hidden or 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
| .wrapper { | |
| display: grid; | |
| grid-template-columns: 100px 1fr 1fr 100px; | |
| grid-template-rows: repeat(3, minmax(100px, max-content)); | |
| grid-gap: 10px; | |
| } | |
| .box { | |
| border: 1px solid pink; | |
| } | |
| .header { | |
| grid-column: 1 / 4; | |
| } | |
| .info { | |
| grid-column: 4 / 5; | |
| grid-row: 1 / 3; | |
| } | |
| .bio { | |
| grid-area: 3 / 2 / 4 / 5; | |
| } | |
| .photo { | |
| grid-area: 2 / 2 / 3 / 4; | |
| } | |
| .trophies { | |
| grid-row: 2 / -1; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment