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(3, 1fr); /* Tworzymy pięć wierszy dla tej siatki. Jest to o dwa wiersze więcej niż jesteśmy w stanie stworzyć z 9 elementów i siatki o 3 kolumnach. Dlatego też, dwa wiersze będą puste, ale będą zajmowały miejsce na stronie. */ grid-template-rows: repeat(5, minmax(50px, auto)); width: 600px; margin: 20px 0; } .grid div { background: lightskyblue; padding: 20px; text-align: center; } .grid div:nth-child(even) { background: goldenrod; } </style> </head> <body> <h1>CSS Grid</h1> <div class="grid"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> </div> <p>Pusty obszar powyżej zajmują dwa puste wiersze siatki ☝</p> </body></html>
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.