> For the complete documentation index, see [llms.txt](https://the-awwwesomes-2.gitbook.io/tutorial-the-awwwesomes-html-and-css/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://the-awwwesomes-2.gitbook.io/tutorial-the-awwwesomes-html-and-css/the-awwwesomes-tutorial-www-beginners-6/umieszczamy-elementy-na-siatce.md). # Umieszczamy elementy na siatce Każdy z Was, kto miał już do czynienia z projektowaniem graficznym stron internetowych, z pewnością wie, do czego służy siatka. Jest ona bardzo ważna dla kompozycji strony, ułatwia harmonijne i estetyczne rozmieszczenie jej elementów. Spójrzmy, jak wygląda siatka layoutu Planty: ![](/files/iCxfKpEUWcPQfytfTART) Zauważmy, że wszystkie elementy znajdują się w głównym kontenerze o szerokości **960 pikseli**, a sama siatka składa się z **12 kolumn**. Czy jest jakiś sposób, dzięki któremu możemy sprawić, aby można było łatwo rozmieszczać elementy bazując na siatce projektu? W zasadzie podczas kodowania każdego projektu strony będziemy musieli skorzystać z gotowej siatki. Na szczęście również w tym wypadku można znaleźć sporo już istniejących rozwiązań i dołączyć wybrane do projektu. W tym tutorialu zaprezentujemy Wam możliwości korzystania z siatki na przykładzie [Bootstrapa](http://getbootstrap.com/css/#grid). Bootstrap jest tzw. frameworkiem, czyli gotowym zestawem narzędzi (m.in. klas CSS) pomocnych w rozwiązywaniu powtarzających się, standardowych problemów webdesignu, na przykład responsywnego menu lub właśnie siatki. #### Budowanie kolumn w oparciu o siatkę z Boostrapa Do zbudowania layoutu w oparciu o siatkę bootstrapową potrzebny nam plik CSS, w którym siatka jest opisana poprzez style. Kontener zawierający kolumny zdefiniowany jest dla kilku szerokości ekranu: dla desktopu, tabletu i smartfona. Jej poszczególne składniki, czyli kolumny, procentowo dostowują się do szerokości kontenera. Dzięki temu nasza strona odpowiednio wyświetla się na różnych urządzeniach. Niestety, w naszym kursie nie starczy nam czasu, aby omówić zagadnienia związane z **projektowaniem responsywnym** (ang. responsive web design), alę dzięki zastosowaniu responsywnej siatki będziemy mogli zaobserwować przynamniej jego częściowe efekty. Maksymalna liczba kolumn zawartych w danym kontenerze to 12. Żeby nasz element został spozycjonowany według siatki, musi się on zajmować między znacznikami takimi jak: `
`, czyli kontener, `
`, czyli rząd, w którym będą wyświetlać się nasze elementy oraz `
`, czyli `
` zbudowany z zadanej ilości kolumn (w tym wypadku 12) Jeśli chcemy, żeby nasz element zajmował całą całą szerokość kontenera, zastosujemy kod ```markup
element zajmujący maksymalną liczbę kolumn, czyli 12
``` ![](/files/viUiJppVVioZ0K6OgfXl) Jeśli chcemy zbudować dwie kolumny o tej samej szerokości, musimy podzielić liczbę dostępnych kolumn w kontenerze na dwa: `12/2 = 6`, czyli `
`. Obie kolumny powinny znajdować się obok siebie, czyli w obrębie tego samego rzędu. Muszą być zatem objęte znacznikiem `
`. ```markup
kolumna lewa
kolumna prawa
``` Może być też tak, że bedzięmy chcieli utworzyć obok siebie 3 kolumny tej samej szerokości. Zasada jest podobna jak wyżej: `12/3 = 4`, zatem stosujemy `
` dla każdej z kolumn. ```markup
kolumna lewa
kolumna środkowa
kolumna prawa
``` Tworząc layout możemy również budować kolumny o różnych szerokościach zawarte w obrębie tego samego rzędu. Pamiętajmy jednak, że maksymalnie możemy zmieścić 12 kolumn w jednym rzędzie tworząc różne kombinacje np. `8+4`,`7+5`,`2+2+3+5`, `9+2+1` itd. ```markup
szerokość zawierająca 8 kolumn siatki
szerokość zawierająca 4 kolumny siatki
``` #### Budowanie siatki w zależności od szerokości urządzenia Zastanawiacie się pewnie, jak uzyskać efekt zmiany szerokości różnych elementów layoutu w zależności od szerokości wyświetlacza. Przykładowo: chcielibyśmy, żeby dla wysokich i średnich rozdzielczości kolumna z definicją i zadaniem zawarte były w dwóch, równych szerokością kolumnach. Niestety, takie rozwiązanie niekorzystnie prezentuje się na telefonie, gdyż podział szerokości kontenera na pół daje nam ostatecznie bardzo wąskie kolumny, w których ograniczona jest czytelność. Możemy wykorzystać wbudowaną właściwość siatki boostrapowej nadając zawartości danego `
` różne szerokości w zależności od urządzenia, na którym wyświetlana jest strona. Co należy zrobić? Popatrzmy na kod poniżej. ```markup
definicja
zadanie
``` Jak zauważyliście, dodane zostały nowe klasy `col-xs-12` – definiująca szerokość dla telefonu (dzieki czemu tekst będzie zajmował 12 kolumn) – oraz `col-sm-6` – definiująca szerokość dla tabletu (tekst zajmie pół szerokości kontenera, czyli 6 kolumn). `col-md-12` definiuje nam zatem szerokość desktopową (typową dla wyświetlaczy laptopów > 992px). `col-lg-12` przypisany jest dla wyświetlaczy o rozdzielczości >= 1200 px, czyli laptopów o większym wyświetlaczu. Zerknijcie na poniższą tabelę | |

Bardzo małe urządzenia
smartfony (<768px)

|

Małe urządzenia
tablety (≥768px)

|

Średnie urządzenia
tzw. desktop (≥992px)

|

Duże urządzenia
duże rozdzielczości (≥1200px)

| | ------------------- | :--------------------------------------------------: | :----------------------------------------: | :------------------------------------------------: | :-----------------------------------------------------: | | Prefix klasy | `.col-xs-` | `.col-sm-` | `.col-md-` | `.col-lg-` | | Szerokość kontenera | brak (auto) | 750px | 960px | 1170px | > **Exercise::Ćwiczenie 12** > > Porą dołączyć plik CSS, zawierający grid pochodzący z Bootstrapa do naszego projektu. Co warto podkreślić, na zajęciach wykorzystujemy jedynie siatkę bootstrapową. Nie będziemy zajmować się innymi komponentami z frameworku Boostrap. [Ściągnij plik `bootstrap-grid.css`](https://app.gitbook.com/s/resources/bootstrap-grid.css) i zapisz go do folderu ze stylami, czyli `styles`. Następnie dodaj plik do Twojego kodu HTML, korzystając ze znacznika ``. Pamiętaj o napisaniu prawidłowej ścieżki! > > Wykorzystaj zdobytą wiedzę o siatce i rozmieść w budowanym layoucie elementy w kolumnach, używając do tego siatki Bootstrapa. --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://the-awwwesomes-2.gitbook.io/tutorial-the-awwwesomes-html-and-css/the-awwwesomes-tutorial-www-beginners-6/umieszczamy-elementy-na-siatce.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.