W tym przewodniku dowiesz się, jak znajdować siatki CSS na stronie, je sprawdzać i rozwiązywać problemy z układem w panelu Elementy w Narzędziach deweloperskich Chrome.
Zrzuty ekranu w tym artykule pochodzą z tych 2 stron internetowych: Fruitbox i Snack box.
Odkrywanie siatek CSS
Jeśli element HTML na stronie ma zastosowane reguły display: grid lub display: inline-grid, obok niego w panelu Elementy zobaczysz plakietkę grid.
Kliknij plakietkę, aby włączyć lub wyłączyć nakładkę siatki na stronie. Nakładka pojawia się na elemencie w postaci siatki, aby pokazać położenie linii siatki i ścieżek:
Otwórz panel Układ. Jeśli na stronie są zawarte siatki, w panelu Układ znajdziesz sekcję Siatka, która zawiera kilka opcji wyświetlania siatek.
Dopasowywanie elementów siatki i ich zawartości za pomocą Edytora siatki
Możesz wyrównywać elementy siatki i ich zawartość jednym kliknięciem zamiast wpisywać reguły CSS.
Aby dopasować elementy siatki i ich zawartość:
W panelu Elementy > Style kliknij przycisk
Edytor siatki obok display: grid.
W Edytorze siatki kliknij odpowiednie przyciski, aby ustawić właściwości CSS
align-*ijustify-*dla elementów siatki oraz ich zawartości.
Sprawdź dopasowane elementy siatki i treści w widocznym obszarze.
Opcje wyświetlania siatki
Sekcja Siatka w panelu Układ zawiera 2 podsekcje:
- Ustawienia wyświetlania nakładki
- Nakładki siatki
Przyjrzyjmy się teraz szczegółowo każdej z tych sekcji.
Ustawienia wyświetlania nakładki
Ustawienia wyświetlania nakładki składają się z 2 części:
a. Menu z tymi opcjami:
- Ukryj etykiety linii: ukryj etykiety linii dla każdego nakładania siatki.
- Pokaż numery wierszy: wyświetlanie numerów wierszy w przypadku każdego nakładania siatki (domyślnie zaznaczone).
- Pokaż nazwy linii: w przypadku siatek z nazwami linii wyświetla nazwy linii dla każdego nakładania siatki.
b. Pola wyboru z opcjami:
- Pokaż rozmiary ścieżek: przełącznik do wyświetlania lub ukrywania rozmiarów ścieżek.
- Pokaż nazwy obszarów: przełącznik do wyświetlania lub ukrywania nazw obszarów w przypadku siatek z nazwanymi obszarami siatki.
- Rozszerzanie linii siatki: domyślnie linie siatki są widoczne tylko wewnątrz elementu z ustawionymi wartościami
display: gridlubdisplay: inline-grid. Gdy włączysz tę opcję, linie siatki będą się rozciągać do krawędzi widocznego obszaru wzdłuż każdej osi.
Przyjrzyjmy się tym ustawieniom bardziej szczegółowo.
Wyświetlanie numerów wierszy
Domyślnie na nakładce siatki wyświetlane są dodatnie i ujemne numery wierszy.
Ukrywanie etykiet linii
Aby ukryć numery wierszy, kliknij Ukryj etykiety wierszy.
Pokaż nazwy linii
Aby wyświetlić nazwy wierszy zamiast numerów, wybierz Pokaż nazwy linii. W tym przykładzie mamy 4 linie o nazwach: left, middle1, middle2 i right.
W tym pokazie element pomarańczowy rozciąga się od lewej do prawej za pomocą kodu CSS grid-column: left / right.
Wyświetlanie nazw linii ułatwia wizualizację pozycji początkowej i końcowej elementu.
Pokaż rozmiary ścieżek
Aby wyświetlić rozmiary ścieżek siatki, zaznacz pole wyboru Pokaż rozmiary ścieżek.
W DevTools w etykiecie każdego wiersza wyświetla się [authored size] - [computed size]: Rozmiar zdefiniowany przez autora: Obliczony rozmiar: rzeczywisty rozmiar na ekranie.
W tym pokazie rozmiary kolumn snack-box są zdefiniowane w pliku CSS grid-template-columns:1fr 2fr;.
Dlatego etykiety linii kolumny zawierają zarówno rozmiary autorski, jak i obliczony: 1fr – 96,66 piksela i 2fr – 193,32 piksela.
Etykiety linii wiersza zawierają tylko obliczony rozmiar: 80 pikseli i 80 pikseli, ponieważ w arkuszu stylów nie ma zdefiniowanych rozmiarów wierszy.
Wyświetlanie nazw obszarów
Aby wyświetlić nazwy obszarów, zaznacz pole wyboru Pokaż nazwy obszarów. W tym przykładzie w siatce są 3 obszary: górny, dolny1 i dolny2.
Wydłużanie linii siatki
Zaznacz pole wyboru Wydłuż linie siatki, aby wydłużyć linie siatki do krawędzi widoku w przypadku każdej osi.
Nakładki siatki
Sekcja Nakładki siatki zawiera listę siatek na stronie, z każdą z nich można powiązać pole wyboru oraz różne opcje.
Włączanie widoków nakładek wielu siatek
Możesz włączyć widoki nakładowe wielu siatek. W tym przykładzie włączono 2 nakładki siatki – main i div.snack-box, każda z nich jest oznaczona innym kolorem.
Dostosowywanie koloru nakładki siatki
Możesz dostosować kolor nakładki siatki, klikając selektor kolorów.
Podświetlanie siatki
Kliknij ikonę podświetlenia, aby natychmiast podświetlić element HTML, przewiń do niego na stronie i wybierz go w panelu Elementy.
