Przewodnik po układzie siatki CSS Fr Jednostka
The Moduł układu siatki CSS został wysłany z nowa jednostka CSS zwany fr jednostka. Tak proste, jak to tylko możliwe, fr jest skrót słowa “frakcja”. Nowa jednostka umożliwia szybkie dzielenie siatki na proporcjonalne kolumny lub wiersze. W rezultacie powstanie w pełni elastyczne i elastyczne siatki staje się prawie bryza.
Ponieważ jednostka ułamkowa została wprowadzona wraz z modułem Układ siatki, można jej użyć w dowolnej przeglądarce obsługuje siatkę CSS. Jeśli chcesz również obsługiwać starsze przeglądarki, to jest świetna Wypełniacz siatkowy CSS co pozwala na używanie nie tylko fr jednostka, ale także inne funkcje siatki.
Podstawowe użycie
Po pierwsze, spójrzmy na podstawowa siatka który używa jednostki ułamkowej. Poniższy układ dzieli przestrzeń na trzy kolumny o równej szerokości i dwa rzędy o równej wysokości.
Przynależny HTML jest z sześć div oznaczone symbolem .pudełko klasa, wewnątrz a .obwoluta div.
1.2.3.4.5.6.
Aby użyć modułu Układ siatki, musisz dodać wyświetlacz: siatka; Właściwość CSS do opakowania. The kolumny-szablon-kolumny właściwość używa fr jednostka jako wartość; stosunek trzech kolumn wynosi 1: 1: 1.
Dla rzędów siatki (rzędy szablonu siatki nieruchomości), nie korzystałem z fr jednostka, ponieważ ma to sens tylko wtedy, gdy opakowanie ma stałą wysokość. W przeciwnym razie może mieć dziwne wyniki na niektórych urządzeniach, jednak nawet wtedy fr jednostka utrzymuje stosunek (a to jest ogromne).
The luka w siatce własność dodaje siatkę 10px między polami. Jeśli nie chcesz żadnej przerwy, po prostu usuń tę właściwość.
.wrapper display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 200px 200px; grid-gap: 10px; .box kolor: biały; wyrównywanie tekstu: środek; rozmiar czcionki: 30px; dopełnienie: 25px;
Zauważ, że powyższy CSS nie zawiera podstawowych stylów, takich jak kolory tła. Możesz znajdź pełny kod w wersji demonstracyjnej na końcu artykułu.
Współczynnik zmiany
Oczywiście nie możesz używać tylko 1: 1: 1, ale dowolny stosunek, jaki chcesz. Poniżej użyłem 1: 2: 1 frakcje które również dzielą przestrzeń na trzy kolumny ale środkowa kolumna będzie dwa razy szerszy jak pozostałe dwa.
Podniosłem też wartość luka w siatce aby zobaczyć, jak zmienia układ. Zasadniczo przeglądarka odejmuje odstęp siatki od szerokości rzutni (w tym przykładzie przerwy w siatce dodają do 80px) i rozcina resztę zgodnie z podanymi frakcjami.
.wrapper display: grid; grid-template-columns: 1fr 2fr 1fr; grid-template-rows: 200px 200px; przerwa w siatce: 40px;
Połączyć fr z innymi jednostkami CSS
Możesz połączyć fr jednostka z wszelkie inne jednostki CSS także. Na przykład w poniższym przykładzie użyłem 60% 1fr 2fr stosunek do mojej siatki.
Jak to działa? The przeglądarka przypisuje 60% szerokości rzutni do pierwszej kolumny. Następnie dzieli pozostałą część przestrzeni na frakcje 1: 2.
To samo można również zapisać jako 60% 13,33333% 26.66667%. Ale szczerze mówiąc, dlaczego ktoś chciałby korzystać z tego formatu? Ogromną zaletą jednostki frakcyjnej jest to, że poprawia czytelność kodu. Co więcej, to jest całkowicie dokładne, ponieważ format procentowy nadal wynosi tylko 99,9999%.
.wrapper display: grid; kolumny-szablon-kolumny: 60% 1fr 2fr; grid-template-rows: 200px 200px; grid-gap: 10px;
Oprócz procentów, możesz także użyć innych jednostek CSS razem z jednostką frakcji, na przykład pt, px, em, i rem.
Dodaj białe znaki za pomocą fr
Co zrobić, jeśli nie chcesz, aby twój projekt był zaśmiecony i dodaj trochę białych znaków do twojej siatki? Jednostka frakcyjna ma również proste rozwiązanie.
Jak widać, ta siatka ma pustą kolumnę podczas gdy nadal zachowuje wszystkie sześć pól. Do tego układu musimy przeciąć przestrzeń na cztery kolumny zamiast trzech. Używamy więc 1fr 1fr 1fr 1fr wartość dla kolumny-szablon-kolumny własność.
Dodajemy pustą kolumnę wewnątrz obszary siatki-szablonu własność, używając notacja kropkowa. Zasadniczo ta właściwość pozwala odniesienie do nazwanych obszarów siatki. I możesz nazwać obszary siatki za pomocą obszar siatki właściwość, której musisz użyć oddzielnie dla każdego obszaru.
.wrapper display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: 200px 200px; grid-gap: 10px; obszary siatki-szablonu: „pudełko-1 pudełko-2. pudełko-3” „pudełko-4 pudełko-5. pudełko-6”; .box-1 obszar siatki: pole-1; .box-2 obszar siatki: pole-2; .box-3 obszar siatki: pole-3; .box-4 obszar siatki: pole-4; .box-5 obszar siatki: pole-5; .box-6 obszar siatki: pole-6;
Obszary białych znaków nie musi koniecznie tworzyć kolumny, one może być wszędzie w siatce.
The powtarzać() funkcjonować
Możesz także użyć fr jednostka razem z powtarzać() funkcjonować dla prostsza składnia. , nie jest to konieczne, jeśli masz tylko prostą siatkę, ale możesz się przydać, gdy chcesz wdrożyć skomplikowany układ, na przykład a zagnieżdżona siatka.
.wrapper display: grid; grid-template-columns: repeat (3, 1fr); / * kolumny-szablon-siatki: 1fr 1fr 1fr; * / grid-template-rows: 200px; grid-gap: 10px;
The powtórz (3, 1 fr) składnia daje taki sam układ tak jak 1fr 1fr 1fr. Poniższy układ jest taki sam jak pierwszy przykład.
Jeśli ty zwiększyć mnożnik w środku powtarzać() funkcja będzie miała więcej kolumn. Na przykład, powtórz (6, 1fr) prowadzi do sześć równych kolumn. W tym przypadku wszystkie nasze pudełka będzie w tym samym rzędzie, co oznacza, że wystarczy użyć tylko jednej wartości (200px) dla rzędy szablonu siatki własność.
.wrapper display: grid; grid-template-columns: repeat (6, 1fr); grid-template-rows: 200px; grid-gap: 10px;
Możesz użyć powtarzać() więcej niż raz. Na przykład poniższy przykład daje siatkę, w której znajdują się ostatnie trzy kolumny dwa razy szerszy jak trzy pierwsze.
.wrapper display: grid; grid-template-columns: repeat (3, 1fr) repeat (3, 2fr); grid-template-rows: 200px; grid-gap: 10px;
Możesz również połączyć powtarzać() z innymi jednostkami CSS. Na przykład możesz użyć 200px powtórzyć (4, 1fr) 200px jako prawidłowy kod.
Jeśli jesteś zainteresowany jak tworzyć złożone układy z modułem CSS Grid, the powtarzać() funkcja i fr jednostka Rachel Andrew ma ciekawy wpis na blogu na temat tego, jak możesz to zrobić.
Demo do eksperymentowania
Wreszcie, oto demo, które obiecałem. Używa tego samego kodu, co pierwszy przykład w tym artykule. Rozwidl to i zobacz, co możesz osiągnąć za pomocą fr jednostka.
