Nová ukázka
Reset
Načíst z URL
Uložit a získat odkaz
Vztahuje se k…
Nevyplňujte
Napiště „nejsem robot“
▶
Přepnout zobrazení
Výsledek
<div class="container"> <div class="row"> <div class="cell">A</div> </div> <div class="row"> <div class="cell">B</div> </div> <div class="row"> <div class="cell"> <div class="row"> <div class="cell">C</div> </div> <div class="row"> <div class="cell">D</div> <div class="cell">E</div> </div> <div class="row"> <div class="cell">F</div> <div class="cell">G</div> </div> <div class="row"> <div class="cell">H</div> <div class="cell">I</div> </div> <div class="row"> <div class="cell">J</div> <div class="cell">K</div> </div> </div> <div class="cell"> <div class="row"> <div class="cell">L</div> </div> <div class="row"> <div class="cell">M</div> <div class="cell">N</div> </div> <div class="row"> <div class="cell cell-o-p">O</div> <div class="cell cell-o-p">P</div> </div> </div> <div class="cell"> <div class="row"> <div class="cell">Q</div> </div> <div class="row"> <div class="cell">R</div> </div> <div class="row"> <div class="cell">S</div> </div> </div> </div> </div>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
.container { display: grid; grid-template-rows: auto; } .row { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 10px; } .cell { border: solid 1px grey; padding: 10px; }
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>