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; } /* W pierwszej kolejności każdemy elementowi na siatce nadajemy unikatową nazwę. Nazwę tą podajemy jako wartość właściwości "grid-area". */ header { grid-area: header; } nav { grid-area: nawigacja; } aside { grid-area: ads; } section.one { grid-area: section1; } section.two { grid-area: section2; } footer { grid-area: stopka; } .grid { display: grid; /* Tworzymy siatkę czterokolumnową. */ grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(200px, auto); gap: 10px; width: 100%; margin: 20px 0; /* A tutaj dzieje się magia 😃. Tworzymy układ naszej strony (pamiętając, że mamy do dyspozycji 4 kolumny) poprzez umieszczanie nazw powyższych elementów (obszarów) na w czterokolumnowych wierszach tekstu. Średnik wstawiamy dopiero na końcu całego wyrażenia ❗ Jeżeli chcemy wybraną "kostkę" siatki zostawić pustą - umieszczamy tam znak kropki "." */ grid-template-areas: "header header header header" "section1 section1 nawigacja nawigacja" "section1 section1 ads ads" "section2 section2 section2 ." "stopka stopka stopka stopka"; /* W tym momencie zmiana layoutu naszej strony będzie ograniczała się jedynie do zmiany nazwy obszaru w poszczególnej części siatki 🙂 */ } .grid > * { background: lightskyblue; padding: 20px; text-align: center; } </style> </head> <body> <h2>CSS Grid Areas</h2> <div class="grid"> <header>Nagłówek</header> <nav>Nawigacja</nav> <aside>Reklamy</aside> <section class="one">Sekcja nr 1</section> <section class="two">Sekcja nr 2</section> <footer>Stopka</footer> </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.