Podczas projektowania strony internetowej wyrównania elementów we właściwych pozycjach ma ogromne znaczenie, a także uczynić je reakcji, co oznacza, że ​​zmienią swoje zachowanie w zależności od różnych typów urządzeń wyświetlających stronę internetową. Jednym ze sposobów wykonywania obu wyżej wymienionych zadań jest budowanie systemu widoku siatki. Tutaj, w tym artykule, poprowadzimy Cię krok po kroku, jak zrobić responsywny widok siatki od zera.

Przed wskoczeniem do jego konstrukcji zbadajmy, czym właściwie jest widok siatki.

Co to jest widok siatki?

Widok siatki to technika, która dzieli stronę internetową na różne kolumny, które ułatwiają pozycjonowanie elementów. Widok siatki, który ma charakter responsywny, zwykle składa się z 12 kolumn wraz ze 100% szerokością i skalami w górę i w dół, w zależności od wielkości przeglądarki internetowej.

Teraz zobaczmy, jak zbudować responsywny widok siatki od zera.

Budowanie responsywnego widoku siatki

Below we have demonstrated the step-by-step procedure of constructing a responsive grid view.

Warunek wstępny

Przed skoczeniem w kierunku kodowania musisz naszkicować widok siatki na papierze, abyś dokładnie wiedział, gdzie umieścić element. Na przykład oto szkic widoku siatki, który zamierzamy zbudować.

Teraz, gdy mamy nasz szkic, zacznijmy część kodowania.

Krok 1

Podstawową koniecznością reakcji strony jest dodanie responsywnego metatagu w pliku HTML.

Html

Atrybut szerokości = urządzenie oznacza, że ​​szerokość strony internetowej zmieni się w korespondencji z szerokością urządzenia, podczas gdy skala początkowa = 1.0 atrybut oznacza, że ​​strona internetowa jest ładowana przez przeglądarkę po raz pierwszy poziom powiększenia wyniesie 1.

Krok 2

Dodaj niektóre elementy HTML, które chcesz wyświetlić na stronie internetowej.

Html

Wskazówka Linux

Aby dodać zawartość w naszej sekcji nagłówka.

Html

• O nas


• Autorski


• Opublikowane artykuły


• Kategorie artykułów

Wszystko o językach programowania!

Tutaj znajdziesz dobrze napisane i dobrze ustrukturyzowane artykuły związane ze wszystkimi językami programowania złożonymi przez naszych wyrafinowanych autorów.

W celu wstawiania treści do paska bocznego stworzyliśmy DIV z nazwami klas „Pasek boczny Col-3” i zagnieżdżę się w niej nieuporządkowaną listę. Jeśli chodzi o sekcję. Oba elementy DIV są dodatkowo zagnieżdżone w większej div z nazwą klasy „Kontener”.

Zajęcia przypisane do zagnieżdżonych elementów Div zostaną wyjaśnione później.

Krok 3

Teraz skończyliśmy z naszą częścią HTML i teraz przejdź do naszej części kodu CSS. Pierwszą rzeczą, którą należy zrobić w arkuszu stylów, jest ustawienie właściwości rozmiaru pudełka elementów HTML na boisko graniczne.

CSS

*
Rozmiar pola: granica;

Powodem tego jest to, że ta nieruchomość obejmuje wyściółkę i granicę w całkowitej wysokości i szerokości elementów HTML.

Krok 4

Teraz przekonwertujmy naszą stronę na responsywny widok siatki 12 kolumn. Aby to zrobić.

Szerokość pojedynczej kolumny = 1/12. całkowitej szerokości ekranu = 100%/12 = 8.33%.

Szerokość dwóch kolumn łącznie = 2/20cie.66%

Szerokość trzech kolumn łącznie = 3/12 całkowitej szerokości ekranu = 3 (100%)/12 = 25%

Szerokość czterech kolumn łącznie = 4/12. całkowitej szerokości ekranu = 4 (100%)/12 = 33.33%

I tak dalej.

CSS

.col-1 szerokość: 8.33%;
.col-2 szerokość: 16.66%;
.col-3 szerokość: 25%;
.col-4 szerokość: 33.33%;
.col-5 szerokość: 41.66%;
.col-6 szerokość: 50%;
.col-7 szerokość: 58.33%;
.col-8 szerokość: 66.66%;
.col-9 szerokość: 75%;
.col-10 szerokość: 83.33%;
.col-11 szerokość: 91.66%;
.col-12 szerokość: 100%;

Szerokość wszystkich kolumn została zdefiniowana w CSS.

Notatka:

Chcieliśmy umieścić nasz pasek boczny i sekcję główną w dwóch kolumnach. Widok siatki z dwiema kolumnami wygląda mniej więcej tak.

Kiedy spojrzymy na szerokości różnych kolumn w powyższym kodzie, dowiadujemy się, że trzy kolumny będą miały 25% szerokości, a dziewięć kolumn będzie miało 75% szerokości. Dlatego div, który gniazduje listę menu, został przypisany .Col-3 klasa, podczas gdy Div z zawartością głównej sekcji został podany .Col-9 klasa.

Krok 5

Teraz korzystasz z klasy „.col- ”, podajmy trochę wyściółki do kolumn i unosisz je w lewo.

CSS

[class*= "col-"]
float: lewy;
Wyściółka: 10px;

Float: Lewa właściwość umieszcza te kolumny po lewej stronie pojemnika, aby je trzymają, aby tekst i inne elementy wbudowane były w kolumnach. Jednak ustawi elementy tak, jakby kolumny w ogóle nie było. Dlatego musimy usunąć przepływ. Aby to zrobić, postępuj zgodnie z fragmentem kodu poniżej.

CSS

.kontener :: po
treść: "";
oba czyste;
Wyświetl: Tabela;

: Po zajęciach i właściwości treści służy do dodawania treści po kontenerze. Tymczasem wartość tabeli właściwości wyświetlacza sprawi, że treść pojawi się w postaci tabeli I.e w rzędach i kolumnach.

Krok 6

.nagłówek
kolor tła: bisque;
kolor biały;
Wyściółka: 20px;

.pasek boczny Ul
Margines: Auto;
Wyściółka: 0px;

.pasek boczny li
Wyściółka: 10px;
Bottom marginesowy: 10px;
kolor tła: Rosybrown;
kolor biały;

Wreszcie, teraz stylizujemy nasze elementy za pomocą klas przypisanych do pojemników DIV nagłówka i paska bocznego.

Wyjście

Strona internetowa została wyświetlona na losowych szerokościach ekranu.

To jest nasza strona internetowa pod numerem 1250px.

Nasza strona internetowa o szerokości 600px.

Wniosek

Aby zbudować responsywny widok siatki, musisz najpierw naszkicować układ, który chcesz, aby mieć swoją stronę, a następnie podzielić stronę na różne kolumny. Na przykład w przykładzie użytym w tym artykule podzieliliśmy naszą stronę na 12 kolumn, obliczając procent każdej kolumny. Następnie możesz użyć tego procentu, aby dokładnie umieścić swoje elementy w różnych kolumnach. W tym przewodniku pokazaliśmy procedurę krok po kroku, aby zbudować widok siatki od zera.