Sprawdzanie układów siatki CSS

Z tego przewodnika dowiesz się, jak wykrywać na stronie siatki CSS na stronie, analizować je i debugować umieszczone w nim problemy 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: Fruitbox i Snack box.

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ć wyświetlanie nakładki siatki na stronie. Nakładka pojawia się nad elementem w formie siatki, która pokazuje położenie linii siatki i ścieżek:

Otwórz panel Układ. Jeśli na stronie znajdują się siatki, panel Układ zawiera sekcję Siatka z różnymi opcjami wyświetlania tych siatki.

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

Elementy siatki i ich zawartość możesz wyrównywać jednym kliknięciem, zamiast wpisywać reguły CSS.

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

1. W panelu Elementy > Style kliknij przycisk Edytor siatki obok 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. Obserwuj w widocznym obszarze poprawione elementy siatki i zawartość.

Opcje wyświetlania siatki

Sekcja Siatka w panelu Układ zawiera 2 podsekcje:

• Ustawienia nakładki
• Nakładki siatki

Przyjrzyjmy się szczegółowo każdej z tych podsekcji.

Ustawienia nakładki

Ustawienia nakładki reklamowej składają się z 2 części:

a. Menu z takimi opcjami:

• Ukryj etykiety linii: ukrywa etykiety wierszy w przypadku każdej nakładki siatki.
• Pokaż numery wierszy: pokazuje numery wierszy każdej nakładki siatki (ustawienie domyślne).
• Pokaż nazwy wierszy: pokazuje nazwy wierszy każdej nakładki siatki w przypadku siatek z nazwami wierszy.

b. Pola wyboru z opcjami w obrębie:

• 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 siatek z nazwanymi obszarami siatki.
• Rozszerz linie siatki: domyślnie linie siatki są wyświetlane tylko w elemencie z ustawieniem display: grid lub display: inline-grid. Po włączeniu tej opcji linie siatki będą rozciągały się do krawędzi widocznego obszaru wzdłuż każdej osi.

Przyjrzyjmy się teraz dokładniej tym ustawieniom.

Pokaż numery wierszy

Domyślnie dodatnie i ujemne numery linii są wyświetlane na nakładce siatki.

Ukryj etykiety linii

Wybierz Ukryj etykiety linii, aby ukryć numery wierszy.

Pokaż nazwy linii

Aby wyświetlić nazwy wierszy zamiast numerów, wybierz Pokaż nazwy wierszy. W tym przykładzie mamy 4 wiersze z nazwami: lewo, środek1, środek2 i prawo.

W tej wersji pomarańczowy element rozciąga się od lewej do prawej i zawiera CSS grid-column: left / right. Pokazywanie nazw linii ułatwia wizualizację pozycji początkowej i końcowej elementu.

Pokaż rozmiary ścieżek

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

W Narzędziach deweloperskich będzie wyświetlać się wartość [authored size] - [computed size] z każdą etykietą wiersza: Authored size: rozmiar zdefiniowany w arkuszu stylów (pominięty, jeśli nie został zdefiniowany). Obliczony: rzeczywisty rozmiar na ekranie.

W tej prezentacji rozmiary kolumn snack-box zostały określone w CSS grid-template-columns:1fr 2fr;. Dlatego etykiety wierszy kolumn zawierają informacje o rozmiarach utworzonych i obliczonych: 1fr–96,66 pikseli i 2fr–193,32 pikseli.

Etykiety wierszy wierszy pokazują 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 ma 3 obszary: top, bottom1 i bottom2.

Wydłuż linie siatki

Zaznacz pole wyboru Rozszerz linie siatki, aby linie siatki rozciągały się wzdłuż każdej osi do krawędzi widocznego obszaru.

Nakładki siatki

Sekcja Nakładki siatki zawiera listę dostępnych na stronie siatek, z których każdy ma pole wyboru, a także różne opcje.

Włącz widoki nakładania wielu siatki

Możesz włączyć wyświetlanie nakładki z wieloma siatkami. 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 nakładki siatki można dostosować, klikając selektor kolorów.

Podświetl siatkę

Kliknij ikonę wyróżnienia, aby od razu podświetlić element HTML, przewiń do niego na stronie i wybierz go w panelu Elementy.