One of three lesson files with CSS grid exercises. This file contains the grid lines solution to the layout challenge. There's a second one with the solution using grid areas see here
Preview: at bl.ocks.org
Last active
February 2, 2022 06:48
-
-
Save davidvandenbor/4dea39195e705081b2a076bed0433c40 to your computer and use it in GitHub Desktop.
Grid challenge exercise solution using grid lines
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> | |
| <link rel="stylesheet" href="style.css"> | |
| </head> | |
| <body> | |
| <main> | |
| <section class="orange"></section> | |
| <section class="blue"></section> | |
| <section class="red"></section> | |
| <section class="green"></section> | |
| </main> | |
| </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
| section { | |
| padding: 30%; | |
| transition: all 2s ease; | |
| } | |
| main { | |
| color: white; | |
| font-size: 1vw; | |
| display: grid; | |
| grid-gap: 10px; | |
| /* omit the following two lines for the challenge */ | |
| grid-template-rows: 1fr 1fr; | |
| grid-template-columns: 1fr 1fr 1fr; | |
| max-width: 1200px; | |
| margin: 10px auto; | |
| } | |
| .orange { | |
| background: orange; | |
| /* omit the following two lines for the challenge */ | |
| grid-row: 1/3; | |
| grid-column: 1/2; | |
| } | |
| .blue { | |
| background: blue; | |
| /* omit the following two lines for the challenge */ | |
| grid-row: 1/3; | |
| grid-column: 2/3; | |
| } | |
| .red { | |
| background: red; | |
| /* omit the following two lines for the challenge */ | |
| grid-row: 1/2; | |
| grid-column: 3/4; | |
| } | |
| .green { | |
| background: green; | |
| /* delete the following two lines for the challenge */ | |
| grid-row: 2/3; | |
| grid-column: 3/4; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment