See the code preview here The full page preview here: https://bl.ocks.org/davidvandenbor/raw/94973470a99d843d008631af6cf6014e/?raw=true
This is the layout that we're trying to build:
Last active
January 30, 2022 22:59
-
-
Save davidvandenbor/94973470a99d843d008631af6cf6014e to your computer and use it in GitHub Desktop.
Basic CSS Grid example, study of 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"> | |
| <link rel="stylesheet" href="style.css"> | |
| <title>CSS Grid example, exercise using grid lines!</title> | |
| </head> | |
| <body> | |
| <main> | |
| <header> | |
| <h2>header</h2> | |
| </header> | |
| <article> | |
| <h2>article</h2> | |
| </article> | |
| <aside> | |
| <h2>aside</h2> | |
| </aside> | |
| <footer> | |
| <h2>footer</h2> | |
| </footer> | |
| </main> | |
| <p> | |
| Below is the sketch on which the grid above was based. <br> Notice the grid-lines!! 1 till 5 horizontally, 1 till 4 vertically! <br> See CSS code for column and row spanning along grid lines! Experiment yourself. <br> You can also export, share or download this codepen, see buttons below in the bottom-right corner. | |
| </p> | |
| <img src="css-grid-layout-example.gif" class="example-image" alt=""> | |
| </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
| main { | |
| max-width: 700px; | |
| margin: 20px auto 10px auto; | |
| display: grid; | |
| /* | |
| below: fr stands for "fraction" you can also use %, | |
| like so: 25% 25% 25% 25%. And also: | |
| "50% 25% 25%" is the SAME as: "2fr 1fr 1fr" | |
| */ | |
| grid-template-columns: 1fr 1fr 1fr 1fr; | |
| grid-template-rows: 100px 400px 100px; | |
| /* the 400px height is just as an preview example, don't forget to set it to "auto" if the content height in the orange <section> is variable! */ | |
| grid-gap: 20px; /* you can also set this to zero for a seamless grid!! */ | |
| } | |
| header { | |
| background: violet; | |
| grid-column: 1/5; /* grid lines indicating how many columns to span horizontally! */ | |
| } | |
| article { | |
| background: orange; | |
| grid-column: 1/4; | |
| } | |
| aside { | |
| background: green; | |
| grid-column: 4/5; | |
| } | |
| footer { | |
| background: red; | |
| grid-column: 1/5; | |
| } | |
| * { | |
| text-align: center; | |
| font-family:serif | |
| } | |
| p { | |
| margin-top:50px; | |
| } | |
| .example-image { | |
| max-width: 806px; | |
| width:100%; | |
| height:auto | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment