Upewnij się, że Twoje układy są w pełni responsywne dzięki alternatywnej jednostce miary.

Nie tak dawno temu całkowicie polegaliśmy na używaniu wartości procentowych dla szerokości i wysokości. Użycie wartości procentowych oznaczało, że układ i elementy mogły przyjąć wysokość i szerokość na podstawie widocznego obszaru. Jednak w miarę ewolucji nowoczesnych stylów CSS doszliśmy do punktu, w którym nawet dobrym pomysłem może być unikanie stosowania wartości procentowych.

Dowiedz się o typowych problemach, które napotkasz podczas używania wartości procentowych. Dowiedz się również o nowoczesnych technikach CSS, których można używać zamiast procentów. Techniki te dadzą taki sam wynik jak procenty bez żadnych wad.

Bardzo prosty przykład siatki

Aby zademonstrować problem z jednostkami procentowymi, rozważ ten układ HTML:

<dzklasa="pojemnikmoja-siatka">
 <dzklasa="element siatki">
dz>
 <dzklasa="element siatki">
dz>
dz>

Zewnętrzny element to podstawa dz element pojemnika z dwoma dz dzieci. Każde dziecko ma

element siatki klasa. Aby przekształcić kontener w siatkę z dwiema kolumnami (dwoma polami), musimy zastosować następujący kod CSS:

ciało {
kolor tła: czarny;
wyrównaj elementy: Centrum;
uzasadnij treść: elastyczny start;
}
.moja-siatka {
wyświetlacz: siatka;
kolumny szablonu siatki: 50% 50%;
margines: 3Rem;
granica: 2pikssolidnyzłoto;
wyściółka: 1Rem;
}
element siatki {
granica: 3pikssolidnyzłoto;
wyściółka: 10Rem 0;
tło: niebieski;
}

Tak więc każda kolumna (element siatki) ma złoty kolor tła. W klasie nadrzędnej kontenera ustawiamy kolumna szablonu siatki do 50% dla każdej kolumny. W rezultacie oba pudełka zajmują 50% całkowitej szerokości elementu kontenera.

Oto wynik:

Ale są problemy z tym wyrównaniem. Po pierwsze, jeśli zdecydowałeś się dodać plik luka do rodzica siatki, dziecko może przelać się z boku. Na przykład, jeśli chcesz dodać przerwa: 3px do .moja-siatka block w CSS, oto jak wyglądałby układ:

Jak widać na powyższym obrazku, prawe pudełko wysunęło się z pojemnika. Czasami możesz tego nie zauważyć, ponieważ twoja przerwa jest wystarczająco mała, co powoduje dziwny problem z wyrównaniem. Ale jeśli masz większą lukę, nakładanie się staje się dość oczywiste.

Zawsze, gdy używasz wartości procentowych i dodajesz marginesy lub luki, istnieje ogromne prawdopodobieństwo wystąpienia tego rodzaju błędów. Ale dlaczego występuje błąd?

To dlatego, że każda kolumna stanowi 50% elementu nadrzędnego. W powyższym przykładzie mamy 50% plus 50% plus ta luka (3px), która wypycha pudełko z pojemnika.

Zauważ, że ten błąd występuje nie tylko w przypadku 50-50. Możesz ustawić pierwszą kolumnę na 75%, drugą kolumnę na 25%, a błąd nadal będzie występował. Dlatego musisz częściej korzystać z poniższego rozwiązania.

Rozwiązanie z wartościami ułamkowymi

Rozwiązaniem jest użycie wartości ułamkowych zamiast procentów. Więc zamiast ustawiać pierwszą kolumnę na 75%, a drugą na 50%, możesz ustawić pierwszą kolumnę na 3fr, a drugą na 1fr:

kolumny szablonu siatki: 3fr 1fr

Zachowuje to ten sam stosunek, co w pierwszym przykładzie. Ale zaletą korzystania fr jednostek polega na tym, że wykorzystują ułamek dostępnej przestrzeni. W tym przypadku pierwsza kolumna zajmie trzy części przestrzeni, podczas gdy druga kolumna zajmie jedną część, nie licząc przerwy.

Kolejna zaleta używania frs zamiast procentów — lub innych jednostki bezwzględne, takie jak px lub em— polega na tym, że można je łączyć ze stałymi wartościami. Oto przykład:

kolumny szablonu siatki: 1fr 10rem;

Z powyższym kodem otrzymasz stałą wartość, która nigdy się nie zmienia, niezależnie od rozmiaru ekranu. Dzieje się tak, ponieważ kolumna po prawej stronie zawsze pozostanie na 10rem, podczas gdy kolumna po lewej zajmie pozostałe miejsce (bez przerwy).

Czasami można uniknąć używania procentów. Ale musisz ich używać w sprytny sposób, który wciąż może dostosować się do sytuacji. Często oznacza to sparowanie ich z fr wartość.

Bardziej realistyczny przykład

Wyobraźmy sobie, że masz stronę, która zawiera główny obszar treści i bok (dla powiązanych postów). Główny obszar zawartości zajmuje trzy części ekranu, podczas gdy bok zajmuje pozostałą przestrzeń pomniejszoną o lukę:

.pojemnik {
szerokość: 100%;
wyświetlacz: siatka;
kolumny szablonu siatki: 3fr 1fr;
luka: 1.5 rem;
}
.karta {
kolor tła: #5A5A5A;
wyściółka: 10piks;
margines-dolny: .5 rem;
}

Oto wynik:

Zwykle przesuwasz pasek boczny (lub na bok) na dół (lub górę) strony, gdy ekran staje się zbyt wąski. Oznacza to skonfigurowanie zapytań o media, które układają wszystko jedno na drugim, gdy widoczny obszar osiągnie określony punkt przerwania.

Oto jak możesz umieścić wszystko w kolumnie, gdy rzutnia osiągnie 55 em lub mniej:

@głoska bezdźwięczna(maksymalna szerokość: 55em) {
.pojemnik {
wyświetlacz: przewód;
kierunek zginania: kolumna;
 }
}

A wynik będzie wyglądał mniej więcej tak:

Teraz nie chcesz, aby każda karta obejmowała szerokość całej rzutni. Karty powinny raczej wyświetlać się obok siebie. Najlepszym sposobem na osiągnięcie tego są siatki CSS. Ale zamiast ustawiać stałe wartości szerokości (np. 50%) dla kolumny szablonu siatki, użyj metody powtarzać() działać w następujący sposób:

.sidebar-grid {
wyświetlacz: siatka;
kolumny szablonu siatki: powtarzać(automatyczne dopasowanie, minimum maksimum(25Rem, 1fr));
wyrównaj zawartość: początek;
luka: 2Rem;
}

Ten CSS ustawia minimalny rozmiar 25rem i maksymalny rozmiar 1fr. Takie podejście jest znacznie lepsze niż ustawianie stałych szerokości, ponieważ opiera się na wewnętrznych rozmiarach. Innymi słowy, pozwala przeglądarce dowiedzieć się czegoś na podstawie dostępnych parametrów.

Teraz, gdy zmniejszysz okno przeglądarki do określonej szerokości, pole siatki automatycznie dostosuje się do dwóch pól w linii.

Gdy ekran staje się mniejszy, spada do jednego pola na linię. Tak więc przeglądarka układa wszystko jedno na drugim. Wszystko to dzieje się, gdy zmieniasz rozmiar okna. Możesz użyć funkcji przeglądarki, np Chrome DevTools, aby zrozumieć, jak działa ten CSSi jak zmiana rozmiaru okien zmienia układ.

Najlepsze jest to, że nie potrzebujesz zapytania o kontener ani niczego wymyślnego, aby element był responsywny. Po prostu ustaw siatkę i używaj minimum maksimum() aby ustawić wartości ułamkowe zamiast stałych rozmiarów.

Dowiedz się więcej o siatce CSS

Jeśli chcesz być świetny w CSS, musisz mieć głęboką wiedzę na temat CSS Grids. Siatki mogą być dość potężne, jeśli są dobrze używane. Za pomocą siatek można uzyskać prawie dowolny układ. To czyni go niezbędnym narzędziem w CSS.

Jedną z rzeczy, o których należy pamiętać podczas korzystania z siatek CSS, jest skupienie się na responsywności. Możesz także zastosować podejście ułamkowe, aby uniknąć przypadków kolizji między elementami. Pamiętaj, aby opanować siatki CSS, ponieważ styl układu bardzo ci pomoże podczas tworzenia stron internetowych.