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="Header">dsdcdgf fg g fg fdgdfa gfdga dfgaf dgadf gadfg adfgdfagadfg adfga dfgdfgdfgdfg adfghadfhkfbhafvhbfkadfbvkadfjhv adfvh daflvhkadfvkl adfhvlkadfvhladfkvhadflvhadfvkfv g adfgadf ghfg dfgh ldfgh dfg hadfgkl hdfg hdfgk ahdfgk hg hgh</div> <div class="Left">dsdcdgf fg g fg fdgdfa gfdga dfgaf dgadf gadfg adfgdfagadfg adfga dfgdfgdfgdfg adfghadfhkfbhafvhbfkadfbvkadfjhv adfvh daflvhkadfvkl adfhvlkadfvhladfkvhadflvhadfvkfv g adfgadf ghfg dfgh ldfgh dfg hadfgkl hdfg hdfgk ahdfgk hg hghdsdcdgf fg g fg fdgdfa gfdga dfgaf dgadf gadfg adfgdfagadfg adfga dfgdfgdfgdfg adfghadfhkfbhafvhbfkadfbvkadfjhv adfvh daflvhkadfvkl adfhvlkadfvhladfkvhadflvhadfvkfv g adfgadf ghfg dfgh ldfgh dfg hadfgkl hdfg hdfgk ahdfgk hg hghsdcsdc</div> <div class="Right">dscsdc</div> <div class="Footer">sdcsdc</div> <div class="Stred"> <div class="horni">sdcsdc</div> <div class="Spordni">dasd</div> </div> </div>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
.container { display: grid; grid-template-columns: 300px auto 300px; grid-template-rows: auto auto auto; grid-auto-rows: 1fr; gap: 10px 10px; grid-auto-flow: row; grid-template-areas: "Header Header Header" "Left Stred Right" "Footer Footer Footer"; width: 100%; } .Header { grid-area: Header; background-color: coral; } .Left { grid-area: Left; background-color: coral; } .Right { grid-area: Right; background-color: coral; } .Footer { grid-area: Footer; background-color: coral; } .Stred { display: grid; grid-template-columns: 1fr; grid-template-rows: 50px 1fr; gap: 10px 0px; grid-auto-flow: row; grid-template-areas: "horni" "Spordni"; grid-area: Stred; } .horni { grid-area: horni; background-color: coral; } .Spordni { grid-area: Spordni; background-color: coral;}
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>