Last active
June 24, 2023 18:18
-
-
Save ryandejaegher/288a57dccdb32c1e75a47a7fe4913e21 to your computer and use it in GitHub Desktop.
CSS Grid single item placement #css #grid
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
| { | |
| "scripts": [], | |
| "styles": [] | |
| } |
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 lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Document</title> | |
| </head> | |
| <body> | |
| <p>This demo uses CSS Grid with a single column and a single grid-area defined. This makes it easy to position the elements using the place-self property on grid children. This makes it very easy to place elements in a 3x3 matrix i.e. like "dice"</p> | |
| <a href="https://css-tricks.com/positioning-overlay-content-with-css-grid/">Uses this article</a> | |
| <div class="grid"> | |
| <p class="a1">Top left</p> | |
| <div class="dice"></div> | |
| <div class="dice"></div> | |
| <div class="dice"></div> | |
| <div class="dice"></div> | |
| <div class="dice"></div> | |
| <div class="dice"></div> | |
| <div class="dice"></div> | |
| <div class="dice"></div> | |
| <div class="dice"></div> | |
| <p class="a2">Center</p> | |
| <p class="a3">Bottom right</p> | |
| </div> | |
| <div class="grid-area"></div> | |
| </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
| |
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
| body { | |
| margin: 0; | |
| } | |
| .grid { | |
| display: grid; | |
| grid-template-columns: 1fr; | |
| grid-template-areas: 'a'; | |
| border: 1px solid red; | |
| min-height: 300px; | |
| max-width: 400px; | |
| margin: 0 auto; | |
| margin-top: 40px; | |
| } | |
| p { | |
| margin: 0; | |
| max-width: 36em; | |
| margin: 0 auto; | |
| } | |
| .dice { | |
| background: red; | |
| width: 16px; | |
| height: 16px; | |
| border-radius: 1000px; | |
| grid-area: a; | |
| } | |
| .grid-area { | |
| display: grid; | |
| min-height: 300px; | |
| max-width: 400px; | |
| } | |
| .dice:nth-of-type(1) { | |
| place-self: start; | |
| } | |
| .dice:nth-of-type(2) { | |
| place-self: start center; | |
| } | |
| .dice:nth-of-type(3) { | |
| place-self: start end; | |
| } | |
| .dice:nth-of-type(4) { | |
| place-self: center start; | |
| } | |
| .dice:nth-of-type(5) { | |
| place-self: center; | |
| } | |
| .dice:nth-of-type(6) { | |
| place-self: center end; | |
| } | |
| .dice:nth-of-type(7) { | |
| place-self: end start; | |
| } | |
| .dice:nth-of-type(8) { | |
| place-self: end center; | |
| } | |
| .dice:nth-of-type(9) { | |
| place-self: end; | |
| } | |
| .a1 { | |
| place-self: start center; | |
| grid-area: a; | |
| } | |
| .a2 { | |
| place-self: center; | |
| grid-area: a; | |
| } | |
| .a3 { | |
| place-self: end; | |
| grid-area: a; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment