| <!DOCTYPE html> |
| <title>CSS Grid Layout Examples</title> |
| <style> |
| .grid { |
| display: inline-grid; |
| border: 0.1em solid; |
| border-radius: 0.2em; |
| font-size: 2em; |
| } |
| |
| .grid > div { |
| margin: 0.05em; |
| border-width: 0.1em; |
| border-style: solid; |
| border-radius: 0.2em; |
| padding: 0.5em; |
| font-family: monospace; |
| } |
| |
| .item-1 { |
| background-color: rgba(242, 46, 138, 0.8); |
| border-color: rgb(242, 46, 138); |
| } |
| |
| .item-2 { |
| background-color: rgba(98, 205, 217, 0.8); |
| border-color: rgb(98, 205, 217); |
| } |
| |
| .item-3 { |
| background-color: rgba(117, 191, 6 , 0.8); |
| border-color: rgb(117, 191, 6); |
| } |
| |
| .item-4 { |
| background-color: rgba(242, 226, 5, 0.8); |
| border-color: rgb(242, 226, 5); |
| } |
| |
| .item-5 { |
| background-color: rgba(242, 54, 12, 0.8); |
| border-color: rgb(242, 54, 12); |
| } |
| |
| .item-6 { |
| background-color: rgba(166, 0, 62, 0.8); |
| border-color: rgb(166, 0, 62); |
| } |
| |
| .bold { |
| font-weight: bold; |
| } |
| |
| .small { |
| font-size: 50%; |
| } |
| |
| .medium { |
| font-size: 75%; |
| } |
| |
| .big { |
| font-size: 150%; |
| } |
| |
| |
| iframe { |
| width: 800px; |
| height: 600px; |
| animation: resize 8s infinite alternate; |
| } |
| |
| @keyframes resize { |
| to { width: 400px; } |
| } |
| </style> |
| |
| <h1>CSS Grid Layout Examples</h1> |
| |
| <h2>Grid Definition</h2> |
| |
| <pre> |
| display: grid; |
| grid-template-rows: 100px 100px; |
| grid-template-columns: 400px 200px 100px; |
| </pre> |
| |
| <div class="grid" style="grid-template-rows: 100px 100px; grid-template-columns: 400px 200px 100px;"> |
| <div class="item-1 big">A</div> |
| <div class="item-2 big">B</div> |
| <div class="item-3 big">C</div> |
| <div class="item-4 big">D</div> |
| <div class="item-5 big">E</div> |
| <div class="item-6 big">F</div> |
| </div> |
| |
| <h2>Grid Areas</h2> |
| |
| <pre> |
| display: grid; |
| grid-template-areas: "header header" |
| "sidebar main " |
| "sidebar footer"; |
| </pre> |
| |
| <div class="grid" style='grid-template-areas: "header header" |
| "sidebar main " |
| "sidebar footer";'> |
| <div class="item-1" style="grid-area: header;">header</div> |
| <div class="item-2" style="grid-area: sidebar;">sidebar</div> |
| <div class="item-3" style="grid-area: main;">main</div> |
| <div class="item-4" style="grid-area: footer;">footer</div> |
| </div> |
| |
| <h2>Item Placement</h2> |
| |
| <pre> |
| display: grid; |
| grid-template-rows: repeat(4, 100px); |
| grid-template-columns: repeat(4, 150px); |
| </pre> |
| |
| <div class="grid" style="grid-template-rows: repeat(4, 100px); grid-template-columns: repeat(4, 150px);"> |
| <div class="item-1 small" style="grid-row: 3; grid-column: 2;">grid-row: 3;<br><br>grid-column: 2;</div> |
| <div class="item-2 medium" style="grid-row: 2 / 5; grid-column: 3 / span 2;">grid-row: 2 / 5;<br><br>grid-column:<br>3 / span 2;</div> |
| </div> |
| |
| <h2>Alignment</h2> |
| |
| <h3>Grid Tracks Alignment</h3> |
| |
| <pre> |
| display: grid; |
| grid-template-rows: 100px 100px; |
| grid-template-columns: 150px 150px 150px; |
| height: 500px; |
| width: 650px; |
| align-content: center; |
| justify-content: space-evenly; |
| </pre> |
| |
| <div class="grid" style="grid-template-rows: 100px 100px; grid-template-columns: 150px 150px 150px; height: 500px; width: 650px; align-content: center; justify-content: space-evenly;"> |
| <div class="item-1 small" style="grid-row: 1; grid-column: 1 / 3;">grid-row: 1;<br><br>grid-column: 1 / 3;</div> |
| <div class="item-2 small" style="grid-row: 1 / 3; grid-column: 3;">grid-row: 1 / 3;<br><br>grid-column: 3;</div> |
| <div class="item-3 small" style="grid-row: 2; grid-column: 1;">grid-row: 2;<br><br>grid-column: 1;</div> |
| <div class="item-4 small" style="grid-row: 2; grid-column: 2;">grid-row: 2;<br><br>grid-column: 2;</div> |
| </div> |
| |
| <h3>Grid Items Alignment</h3> |
| |
| <pre> |
| display: grid; |
| grid-template-rows: 200px 200px; |
| grid-template-columns: 400px 400px; |
| </pre> |
| |
| <div class="grid" style="grid-template-rows: 200px 200px; grid-template-columns: 400px 400px;"> |
| <div class="item-1 medium" style="align-self: stretch; justify-self: stretch;">align-self: stretch;<br><br>justify-self: stretch;</div> |
| <div class="item-2 medium" style="align-self: end; justify-self: start;">align-self: end;<br><br>justify-self: start;</div> |
| <div class="item-3 medium" style="grid-column: span 2; align-self: center; justify-self: center;">grid-column: span 2;<br><br>align-self: center;<br><br>justify-self: center;</div> |
| </div> |
| |
| <h2>Responsive Design</h2> |
| |
| <pre> |
| display: grid; |
| grid-gap: 10px 20px; |
| grid-template-rows: 100px 1fr auto; |
| grid-template-columns: 1fr 200px; |
| grid-template-areas: "header header" |
| "content aside " |
| "footer aside "; |
| |
| @media (max-width: 600px) { |
| grid-gap: 0; |
| grid-template-rows: auto 1fr auto auto; |
| grid-template-columns: 1fr; |
| grid-template-areas: "header " |
| "content" |
| "aside " |
| "footer "; |
| } |
| </pre> |
| |
| <iframe src="responsive-grid.html"></iframe> |
