4 zasady CSS Grid, które wyjaśniają kolumny i wiersze

Zacznij od poprawnego otwarcia formularza. Atrybut action wskazuje adres, na który trafią dane, a method określa sposób wysyłki — najczęściej post przy danych wrażliwych, get przy wyszukiwaniu. Jeśli pominiesz action, formularz wyśle dane na ten sam adres, co rzadko jest zamierzone. Pamiętaj też o domknięciu znacznika form po wszystkich polach i przycisku.
Przy flex-wrap: wrap procenty nie sumują się wizualnie tak, jak w głowie. Trzy elementy po 33% nie zmieszczą się w jednej linii, bo przeglądarka zaokrągla ułamki i dodaje ewentualne odstępy. Bezpieczniej użyj wartości nieco mniejszej, oświetlenie w salonie np. 32%, albo policz gap i odejmij go od szerokości bazowej przez calc(). Pamiętaj, że flex-basis to tylko punkt wyjścia — flex-grow i flex-shrink mogą go nadpisać, gdy w kontenerze zabraknie lub nadmiarowo pojawi się miejsce.

Jak czytać zapis grid-template-columns Zapis grid-template-columns: repeat(3, 1fr) to skrót na trzy równe kolumny. repeat() przydaje się, gdy kolumn jest dużo. Możesz też mieszać: repeat(2, 100px) 1fr da dwie stałe kolumny i jedną elastyczną. Pamiętaj, że liczba wartości w grid-template-columns określa liczbę kolumn, a nie liczbę elementów. Jeśli masz sześć elementów i trzy kolumny, powstaną dwa wiersze — chyba że wcześniej zdefiniujesz grid-template-rows i wymusisz inny układ. Domyślnie wiersze tworzą się automatycznie i mają wysokość dopasowaną do zawartości.

Aby sprawdzić, co się dzieje, użyj narzędzi deweloperskich w przeglądarce. Podświetl kontener flex i podejrzyj obliczone wartości. Zobaczysz, który element się kurczy i o ile. Możesz też tymczasowo ustawić flex-shrink: 0 na wszystkich elementach, aby zobaczyć, czy to rozwiązuje problem. Pamiętaj, że kurczenie może być pożądane — na przykład w responsywnych układach, gdzie elementy mają się dostosowywać. Kluczowe jest zrozumienie, że flex-shrink to nie suwak szerokości, ale współczynnik udziału w redukcji nadmiaru.

Pola input, które faktycznie zbierają dane Każde pole input powinno mieć type, name i id. type decyduje o klawiaturze i walidacji, name jest kluczem, pod którym wartość trafi do serwera, a id łączy pole z etykietą label. Bez name pole istnieje wizualnie, ale nie zostanie wysłane. Bez label użytkownik nie wie, co wpisać, a czytniki ekranu nie odczytają kontekstu. Typowe wartości to text, email, password, number i checkbox. Dla pola wyboru wielokrotnego użyj select z opcjami, a dla dłuższej wypowiedzi — textarea, które nie jest samozamykające.

Najczęstszy błąd to mieszanie liczby komórek w wierszach. Jeśli w pierwszym wierszu masz trzy , a w drugim cztery, tabela się rozjedzie. Przeglądarka doda brakującą komórkę na końcu albo przerzuci zawartość do nowej kolumny. Zanim oskarżysz CSS, policz komórki w każdym wierszu. Here's more information in regards to https://Lebenskunst.berlin/ take a look at the page. Drugi typowy problem to używanie tabeli do budowania layoutu strony. Do rozmieszczania elementów służą inne znaczniki, a tabela ma sens tylko dla danych, które naprawdę mają wiersze i kolumny.
Na koniec sprawdź formularz w praktyce: wypełnij go błędnie, wyślij puste pola, kliknij przycisk Enterem i sprawdź, czy fokus przeskakuje logicznie. Najczęstsze błędy to brak name, przycisk poza form, pominięte label oraz poleganie wyłącznie na walidacji przeglądarki. Poprawienie tych czterech rzeczy rozwiązuje większość problemów z formularzami, które „nie chcą się wysłać".

Tabela w HTML zaczyna się od znacznika , ale prawdziwa struktura powstaje dopiero wewnątrz. Najprostszy poprawny szkielet to , potem dla każdego wiersza, a w każdym wierszu dla zwykłej komórki lub dla komórki nagłówkowej. Przeglądarka sama domknie brakujące znaczniki, jeśli je pominiesz, ale nie licz na to, że ułoży dane tak, jak chcesz. Błędny szkielet objawia się przesunięciem kolumn albo pustymi miejscami, których nie widać w kodzie, dopóki nie otworzysz podglądu.

Zanim dwuklik zadziała poprawnie, plik musi mieć właściwe rozszerzenie. Windows domyślnie ukrywa rozszerzenia znanych typów plików, więc plik zapisany jako index.html.txt może wyglądać jak index.html, a po dwukliku otworzy się w Notatniku. Sprawdź rozszerzenie w Eksploratorze, włączając widok rozszerzeń, albo w oknie zapisu wybierz typ „Wszystkie pliki" i dopisz .html ręcznie. Podobny problem pojawia się, gdy edytor tekstu zapisuje dokument w formacie innym niż czysty tekst, na przykład w formacie dokumentu biurowego.

CSS Grid działa na zasadzie siatki, którą sam definiujesz na kontenerze. Zanim ustawisz cokolwiek na dzieciach, musisz nadać rodzicowi display: grid. Bez tego wszystkie właściwości siatki są ignorowane. To pierwszy i najczęstszy błąd: początkujący ustawiają grid-template-columns na elemencie potomnym i dziwią się, że nic się nie dzieje. Siatkę zawsze opisujesz na kontenerze, a elementy potomne tylko się w niej układają.