Last active
January 5, 2021 16:59
-
-
Save huangsam/5443b762e2a31e47d80c504e02a2b963 to your computer and use it in GitHub Desktop.
Play around with CSS Grid
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
| root = true | |
| [*] | |
| indent_size = 2 | |
| indent_style = space |
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> | |
| <title>Hello World</title> | |
| <link rel="stylesheet" href="main.css"> | |
| </head> | |
| <body> | |
| <div class="summary"> | |
| <h1>Grid Lock</h1> | |
| <p>Comparing grid-fill with grid-fit.</p> | |
| </div> | |
| <div class="line"> | |
| <div class="line-item line-start">Start</div> | |
| <div class="line-item line-end">End</div> | |
| </div> | |
| <p>Grid fill</p> | |
| <div class="grid grid-fill"> | |
| <div class="box">1</div> | |
| <div class="box">2</div> | |
| <div class="box">3</div> | |
| <div class="box">4</div> | |
| <div class="box">5</div> | |
| <div class="box">6</div> | |
| </div> | |
| <p>Grid fit</p> | |
| <div class="grid grid-fit"> | |
| <div class="box">1</div> | |
| <div class="box">2</div> | |
| <div class="box">3</div> | |
| <div class="box">4</div> | |
| <div class="box">5</div> | |
| <div class="box">6</div> | |
| </div> | |
| </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
| body { | |
| /* Apply default margin */ | |
| margin: 30px 15px; | |
| /* Apply default font */ | |
| font-family: sans-serif; | |
| } | |
| .summary { | |
| /* Apply margin to summary */ | |
| margin-top: 30px; | |
| margin-bottom: 30px; | |
| } | |
| .line { | |
| /* Apply colors to informational line */ | |
| background-color: black; | |
| color: white; | |
| /* Apply padding to informational line */ | |
| padding: 5px; | |
| } | |
| .line .line-item { | |
| /* Apply padding to each element */ | |
| padding: 5px; | |
| } | |
| .line .line-start { | |
| /* Ensure first div sticks to the left */ | |
| float: left; | |
| } | |
| .line .line-end { | |
| /* Ensure second div sticks to the right */ | |
| text-align: right; | |
| } | |
| .line:after { | |
| /* Apply clearfix hack to line */ | |
| content: ""; | |
| clear: both; | |
| display: table; | |
| } | |
| .grid { | |
| /* Apply grid layout */ | |
| display: grid; | |
| grid-gap: 10px; | |
| } | |
| .grid-fill { | |
| /* Apply responsive fill */ | |
| grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); | |
| } | |
| .grid-fit { | |
| /* Apply responsive fit */ | |
| grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); | |
| } | |
| .box { | |
| /* Apply colors to box */ | |
| background-color: black; | |
| color: white; | |
| /* Apply font centering */ | |
| text-align: center; | |
| padding: 60px 0px; | |
| /* Apply font size */ | |
| font-size: 30px; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment