Sprawdzanie układów siatki CSS

Jecelyn Yeen

Sofia Emelianova

Z tego przewodnika dowiesz się, jak wykrywać siatki CSS na stronie, analizować je i debugować błędy z układem w panelu Elementy w Narzędziach deweloperskich w Chrome.

Przykłady widoczne na zrzutach ekranu w tym artykule pochodzą z tych 2 stron internetowych: Pudełko z owocami i Pudełko z przekąskami.

Odkryj siatki CSS

Jeśli do elementu HTML na stronie zastosowano parametr display: grid lub display: inline-grid, w panelu Elementy zobaczysz obok niego plakietkę grid.

Kliknij plakietkę, aby włączyć lub wyłączyć na stronie nakładkę z siatką. Nakładka pojawi się nad elementem, układa się jak siatka i pokazuje położenie jej linii siatki i ścieżek:

Otwórz panel Układ. Jeśli na stronie są uwzględnione siatki, panel Układ zawiera sekcję Siatka z opcjami ich wyświetlania.

Wyrównywanie elementów siatki i ich zawartości za pomocą edytora siatki

Możesz wyrównać elementy siatki i ich zawartość jednym kliknięciem przycisku, zamiast wpisywać reguły CSS.

Aby wyrównać elementy siatki i ich zawartość:

1. W panelu Elementy > Style kliknij przycisk Edytor siatki obok elementu display: grid.

   

2. W Edytorze siatki kliknij odpowiednie przyciski, aby ustawić właściwości CSS align-* i justify-* dla elementów siatki i ich zawartości.

   

3. Przyjrzyj się dostosowanym elementom siatki i treściom 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ę szczegółowo każdej z tych podsekcji.

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: ukrywa etykiety linii w przypadku każdej nakładki siatki.
• Pokaż numery wierszy: pokazuje numery wierszy dla każdej nakładki siatki (domyślnie wybrana).
• Pokaż nazwy linii: w przypadku siatek z nazwami linii wyświetlane są nazwy linii dla każdej nakładki siatki.

b. Pola wyboru z opcjami w zakresie:

• Pokaż rozmiary ścieżek: przełącz, aby wyświetlić lub ukryć rozmiary ścieżek.
• Pokaż nazwy obszarów: przełącz, aby wyświetlić lub ukryć nazwy obszarów w przypadku siatki z nazwanymi obszarami siatki.
• Wydłuż linie siatki: domyślnie linie siatki wyświetlają się tylko wewnątrz elementu z ustawionymi display: grid lub display: inline-grid. Po włączeniu tej opcji linie siatki rozciągają się do krawędzi widocznego obszaru wzdłuż każdej osi.

Przyjrzyjmy się tym ustawieniom bardziej szczegółowo.

Pokaż numery wierszy

Domyślnie na nakładce z siatką wyświetlane są wartości dodatnie i ujemne.

Ukryj etykiety linii

Wybierz Ukryj etykiety wierszy, aby ukryć numery wierszy.

Pokaż nazwy wierszy

Aby zobaczyć nazwy wierszy zamiast numerów, możesz kliknąć Pokaż nazwy wierszy. W tym przykładzie mamy 4 wiersze o nazwach: left, middle1, middle2 i right.

W tej wersji demonstracyjnej element pomarańczowy rozciąga się od lewej do prawej, a kod CSS: grid-column: left / right. Pokazywanie nazw linii ułatwia wizualizację położenia początkowego i końcowego elementu.

Pokaż rozmiary ścieżek

Zaznacz pole Pokaż rozmiary ścieżek, aby wyświetlić rozmiary ścieżek w siatce.

Narzędzia deweloperskie wyświetlą [authored size] - [computed size] w każdej etykiecie wiersza: Autor Rozmiar: rozmiar zdefiniowany w arkuszu stylów (pominięty, jeśli nie został zdefiniowany). Obliczony rozmiar: rzeczywisty rozmiar na ekranie.

W tej wersji demonstracyjnej rozmiary kolumn snack-box są określone w CSS grid-template-columns:1fr 2fr;. Dlatego etykiety linii kolumn uwzględniają rozmiary własne i obliczone: 1fr–96,66 piks. i 2fr – 193,32 piks.

Etykiety wierszy wierszy zawierają tylko obliczone rozmiary: 80px i 80px, ponieważ w arkuszu stylów nie ma zdefiniowanych rozmiarów wierszy.

Pokaż nazwy obszarów

Aby wyświetlić nazwy obszarów, zaznacz pole wyboru Pokaż nazwy obszarów. W tym przykładzie siatka obejmuje 3 obszary – top, bottom1 i bottom2.

Wydłuż linie siatki

Zaznacz pole wyboru Wydłuż linie siatki, by rozszerzyć linie siatki do krawędzi widocznego obszaru wzdłuż każdej osi.

Nakładki siatki

Sekcja Nakładki siatki zawiera listę siatek widocznych na stronie, każdą z polem wyboru oraz różnymi opcjami.

Włącz widoki nakładane wielu siatek

Możesz włączyć widoki nakładane dla wielu siatek. W tym przykładzie włączone są 2 nakładki siatki – main i div.snack-box – każda w innym kolorze.

Dostosuj kolor nakładki siatki

Kolor każdej nakładki siatki możesz dostosować, klikając selektor kolorów.

Zaznacz siatkę

Kliknij ikonę wyróżnienia, aby od razu wyróżnić element HTML, a następnie przewiń do niego na stronie i wybierz go w panelu Elementy.