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
<head> <link rel="stylesheet" href="css/style.css" type="text/css"> </head> <body> <div class="container"> <div id="one">1</div> <div id="two">2</div> <div id="three">3</div> <div id="four">4</div> <div id="five">5</div> <div id="six">6</div> <div id="seven">7</div> <div id="eight">8</div> </div> </body>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
.container { display: grid; grid-template: 1.6em 1.6em 1.6em / 1fr 1fr 1fr; grid-template: repeat(3, 1.6em) / repeat(3, 1fr); grid-gap: 10px; } #one { grid-column: 1 / 4; bacground-color: blue; } #two { grid-row: 2 / 4; } #five { grid-column: 2 / 4; } #six { grid-column: 1 / 3; } #eight { grid-column: 1 / 4; } /* background color rules */ .container div:nth-child(1), div:nth-child(6) { background-color: #B8336A; } .container div:nth-child(2), div:nth-child(7) { background-color: #726DA8; } .container div:nth-child(3), div:nth-child(8) { background-color: #7D8CC4; } .container div:nth-child(4) { background-color: #A0D2DB; } .container div:nth-child(5) { background-color: #C490D1; }
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>