Narzędzia deweloperskie w Chrome sprawiają, że debugowanie układów siatki CSS jest intuicyjne dzięki różnym opcjom wizualizacji.
Obejrzyj film, aby dowiedzieć się, jak przełączać nakładkę siatki w panelu Elementy i używać jej do:
- Wizualizacja i sprawdzanie układów siatki.
- Podczas umieszczania elementów siatki możesz się odwoływać do numerów wierszy i kolumn.
- Nazwy linii i obszarów możesz zobaczyć na nakładce, jeśli masz dużo elementów siatki, a wyniki są mylące.
- Sprawdź rozmiary ścieżek.
Poza tym dzięki Edytorowi siatki w panelu Elementy > Style możesz jednym kliknięciem wyrównywać elementy i ich zawartość w układzie siatki – kliknij przycisk, zamiast wpisywać reguły CSS.
Jeśli chcesz dowiedzieć się więcej, zapoznaj się z samouczkiem dotyczącym analizy siatki CSS.