Grid Gap CSS
W tym samouczku użyjemy tej właściwości „Grid-Gap” w CSS i szczegółowo wyjaśni ci koncepcję „Grid-Gap” wraz z różnymi przykładami.
Przykład 1:
Zaczniemy od naszego pierwszego przykładu od utworzenia nowego pliku w oprogramowaniu, Visual Studio Code. Kiedy tworzymy nowy plik w kodzie Visual Studio, możemy wybrać język i wybieramy HTML. Następnie należy utworzyć kod HTML. Kod Visual Studio pozwala nam natychmiast nabywać podstawowe znaczniki, wprowadzając „!”, A następnie kliknięcie„ Enter.„Więc skorzystamy z tej zdolności i zebędziemy wszystkie te podstawowe tagi. W znaczniku głównym HTML podajemy link do pliku CSS. Utworzymy nagłówek, a następnie umieścimy akapit poniżej tego nagłówka. Następnie tworzymy główną klasę DIV o nazwie „Container Grid” i umieszczamy siedem innych klas DIV w tej głównej divie. Podajemy różne nazwy wszystkim divom, takim jak „Item1” dla klasy 1, „Item2” dla klasy 2 i tak dalej.
Korzystamy z właściwości „Alignaj tekstu” dla „ciała” i dostosowujemy ją do „centrum”. Następnie wybieramy „zielony” jako „kolor” nagłówka, a także stawiamy „Podkreśl” właściwości „dekoracji tekstu”. Rodzina czcionki to „Algierski”. „Rodzina czcionki” akapitu to „Times New Roman”. „Font-Waight” jest „odważny” i „bordowy” „Kolor”. „Rozmiar czcionki”, którą ustawiamy tutaj, to „20px” dla akapitu, a także „kursywa” czcionka akapitu.
Teraz ustawymy główny div o nazwie „Grid-Container”. W tym celu „wyświetlacz”, którego używamy, to „siatka”. Następnie mamy właściwość „-grid-template-kolumn”, która jest używana do określenia liczby kolumn wewnątrz siatki. Umieszczamy „automatyczne automatyczne automatyczne” jako wartość tej właściwości, co oznacza, że rozmiar kolumny jest ustawiony zgodnie z rozmiarem kontenera. Tutaj mamy trzy kolumny w tym układzie siatki.
Teraz ustawiamy „Grid-Column Gap” i „Grid-Row-Gap” osobno. „Gap-column”, którą ustawiamy, to „40px”, a „Grid-Row-Gap” to „20px”. „Kolor tła” głównego pojemnika Div to „Orange”, a wyściółka, której tu używamy, to „10px”. Ta wyściółka jest wykorzystywana do generowania przestrzeni wokół zawartości.
Teraz ustawimy „div” „siatki. kontener ”, który reprezentuje wszystkie div, które są obecne w głównej divie. Ustawiamy „kolor tła” Divs na „biały”, a tekst zapisany w nich jest wyrównany w „środku”. Po tym wszystkim mamy właściwość „wyściółka”, w której ustawiamy górną i dolną wyściółkę na „20px”, a lewy prawy wyściółka to „0”. Rozmiar czcionki zapisanej w tych divach jest ustawiony na „30px”. Teraz spójrz na zrzut ekranu wyjściowego poniżej tego kodu.
Tutaj szczelina lub przestrzeń między wierszami wynosi „20px”, a przestrzeń między kolumnami to „40px” na danym zrzucie ekranu.
Przykład nr 2:
W tym przykładzie mamy osiem DIV w głównej Div „Container Grid”. Zastosujemy właściwość „Grid-Gap” do tego kodu, która jest właściwością skrótów w „Grid-Column Gap” i „Grid-Row-Gap”. Ustawimy zarówno szczelinę w kolumnie, jak i szczelinę wiersza w tej jednej właściwości „Grid Gap”.
Używamy „koloru” nagłówka jako „pomarańczowy” i „dekoracja tekstu”, aby „podkreślić”. Ponadto „rata czcionki” to „algierskie”. Następnie ustawiamy „siatkę” dla właściwości „Wyświetl” oraz w „Grid-Template-Column”, używamy czterech „auto”, więc otrzymamy cztery kolumny w wyjściu.
Następnie mamy właściwość „Grid-Gap”, w której ustawiamy rozmiar przestrzeni w „%” dla kolumn i rzędów siatki. Ustawiliśmy to na „5%”, więc stworzy przestrzeń „5%” między kolumnami a „5%” między wierszami. Korzystamy z „koloru tła” do „światła-slate-szary”, a „wyściółka” to „10px” dla tej „siatki. ontainer ”. Stosujemy „kolor tła” do innych Divów w „RGBA (122, 240, 122, 0.8), który jest „jasno zielony”, a także mamy „0.8 ”wartość alfa, więc pokazuje pewną przejrzystość.
Wyrównujemy tekst w „środku”, a „wyściółka” dla „TOP” i „Utwór” to „20px”, a „0” jest dla „lewej” i „prawej” wyściółki. „Rozmiar czcionki” to „30px” w tym kodzie.
Na danym zrzucie ekranu istnieją cztery kolumny, a przestrzeń między wierszami i kolumnami wynosi „5%”, ponieważ ustawiliśmy to we właściwości „Grid-Gap”.
Przykład nr 3:
W tym przykładzie mamy dwanaście divów i zastosujemy na nich właściwość „Grid-Gap”. Ponadto ustawimy wartość tej właściwości „Grid-Gap” w „PX” w kodzie CSS.
W przypadku „ciała” używamy atrybutu „-align” i naprawiamy go do „środka”. „W stylu czcionki” jest „kursywa”. Następnie dodajemy wartość „siatki” dla właściwości „Wyświetl”. Używamy czterech „auto” we właściwości „Grid-Template-Column”, aby uzyskać cztery kolumny w wyjściu. Następnie mamy właściwość „Grid-Gap”, która pozwala nam określić rozmiar przestrzeni w „Pixel” dla kolumn i wierszy siatki. Ustawiliśmy go na „50px”, co oznacza, że między kolumnami a „50px” będzie „50px”. „Kolor tła” jest ustawiony na „różowy”. Ponadto tworzymy „granicę” dla tego głównego div, która jest ustawiona na „1Px Solid Black”.
Tutaj mamy „10px” „wyściółki”. Teraz ustawiamy „kolor tła” wewnętrznych divs w formacie „RGBA” i ustawiamy go na „RGBA (204, 90, 90, 0.8) ”, który pokazuje przejrzystość tego koloru. Wartość przezroczystości tutaj to „0.8 ”. „Wyściółka”, „rozmiar czcionki” i „rata czcionki” jest taka sama, jak użyliśmy w powyższych przykładach.
To pokazuje, że mamy cztery kolumny w wyjściu, a także przestrzeń między rzędami siatki a kolumnami siatki to „50px” tutaj.
Wniosek
Celem tego samouczka jest pomoc w zrozumieniu, jak korzystać z właściwości CSS „Grid-Gap”. W tym samouczku przyjrzeliśmy się właściwości CSS „Grid-Gap” i opisaliśmy, co oznacza właściwość „Grip-Gap”, dlaczego używamy tej właściwości, jak ją używać i jak zwraca dane wyjściowe. Użycie „gapy siatki” zostało już tutaj omówione. Wyjaśniliśmy tę właściwość, której użyliśmy do ustawiania wielkości przestrzeni między wierszami i kolumnami siatki. Pokazaliśmy również przykłady korzystania z właściwości „Grid-Gap”, a także wyniki wszystkich przykładów w tym samouczku.