Live
x
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>CSS Grid</title> <style> body { font-family: sans-serif; } .grid { display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(6, minmax(80px, auto)); gap: 10px; width: 100%; margin: 20px 0; } .grid div { background: lightskyblue; padding: 20px; text-align: center; } .grid div:nth-child(even) { background: goldenrod; } /* Style dla poszczególnych dzieci*/ .one { /* start = pierwsza linia, end = piąta linia */ grid-column: 1/5; } .two { grid-column: 5/7; grid-row: span 5; } .three { grid-column: span 2; grid-row: 2/ span 2; } .four { grid-column: span 6; grid-row: 6/ span 1; } .five { grid-column: 3/5; grid-row: 2/6; } .six { grid-column: 1/3; grid-row: 4/6; } </style> </head> <body> <h1>CSS Grid</h1> <p>Układ strony stworzony za pomocą siatki.</p> <div class="grid"> <div class="one">1</div> <div class="two">2</div> <div class="three">3</div> <div class="four">4</div> <div class="five">5</div> <div class="six">6</div> </div> </body></html>
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.