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; } /* Siatka z kolumnami równej szerokości. Liczba kolumn jest determinowana liczbą wartości. Podanie trzech wartości (tak jak w tym przykładzie) oznacza utworzenie trzech kolumn. Jako, że mamy 9 elementów HTML, zostaną więc utworzone 3 wiersze po 3 kilkumny. */ .grid { /* Utworzenie siatki. */ display: grid; /* Istnieją trzy sposoby na zdefiniowanie szerokości kolumn: (odkomentuj kolejne linie "grid-template-columns", aby zobaczyć jak one działają) */ /* 1. Podanie ich szerokości w jednostkach względnych lub bezwzględnych: (podajemy trzy wartości, więc utworzymy trzy kolumny) */ grid-template-columns: 33.3% 33.3% 33.3%; /* 2. Podanie ich szerokości w jednostakch "fr": (te same wartości "fr", więc kolumny będą równej szerokości) */ /* grid-template-columns: 1fr 1fr 1fr; */ /* 3. Jeżeli chcemy powtórzyć wielokrotnie tą samą wartość, możemy skorzystać z funkcji "repeat". Najpierw podajemy liczbę powtórzeń, następnie powtarzaną wielkość: (utworzymy tutaj 3 kolumny, każda o szerokości "1fr") */ /* grid-template-columns: repeat(3, 1fr); */ width: 600px; margin: 20px 0; } /* Siatka o nierównej szerokości kolumn: */ .grid.not-even { grid-template-columns: 25% 50% 25%; /* Środkowa kolumna będzie dwa razy szersza niż pozostałe.*/ grid-template-columns: 1fr 2fr 1fr; } .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"> <!-- W tym przykładzie tworzymy siatkę z trzema kolumnami, więc automatycznie zostaną utworzone trzy wiersze. --> <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> <div class="grid not-even"> <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> </body></html>
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.