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
<body id="gridbox"> <header id="header">header</header> <main id="main">main</main> <aside id="panel">panel</aside> <aside id="komentare">komentare</aside> <footer id="footer">footer</footer> </body> <!-- když se ten zelený nevejde vedle toho červeného aby se zarovnal pod něj (tj. zelený pod červený)-->
HTML
Autoformát
Standardní režim
Mobilní zobrazení
#gridbox { display: grid; grid-template-columns: 1fr 56.25em 18.75em 1fr; grid-auto-rows: auto; grid-gap: 0px; margin: 0 auto; } #header { background-color: yellow; grid-column: 1 / 5; grid-row: 1 / 2; height: 150px; } #main { background-color: red; max-width: 56.25em; grid-column: 2 / 3; grid-row: 2 / 3; height: 300px; } #panel { background-color: green; width: 18.75em; grid-column: 3 / 4; grid-row: 2 / 4; height: 520px; } #komentare { background-color: blue; max-width: 56.25em; grid-column: 2 / 3; grid-row: 3 / 4; height: 220px; } #footer { background-color: black; grid-column: 1 / 5; grid-row: 4 / 5; height: 150px; }
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>