Siatkę można zdefiniować jako przecinający się zbiór linii pionowych i poziomych. Układ siatki CSS dzieli stronę na główne sekcje. Właściwość Grid oferuje system układu oparty na siatce, składający się z wierszy i kolumn. Ułatwia projektowanie stron internetowych bez pozycjonowania i pływania. Układ siatki umożliwia nam tworzenie struktur siatki przedstawionych w CSS, a nie w HTML.
Podobnie jak tabela, umożliwia użytkownikowi wyrównanie elementów w wiersze i kolumny. Ale w porównaniu do tabel, łatwo jest zaprojektować układ za pomocą siatki CSS. Możemy zdefiniować kolumny i wiersze na siatce za pomocą wiersze szablonu siatki I kolumny szablonów siatki nieruchomości.
przekonwertuj liczbę całkowitą na ciąg Java
Kontener siatki można utworzyć, deklarując wyświetlacz: siatka Lub wyświetlacz: inline-grid na elemencie. Kontener siatki zawiera elementy siatki umieszczone wewnątrz wierszy i kolumn.
Siatka v/s Flexbox
Często pojawia się pytanie, czym siatka różni się od flexboksa. Siatka jest przeznaczona dla układów dwuwymiarowych (jednocześnie wierszy i kolumn), natomiast flexbox jest używany dla układów jednowymiarowych (w rzędzie lub kolumnie). Flexbox jest używany, gdy wszystko musi być w linii prostej.
Flexbox służy do układania elementów w jednej kolumnie lub w jednym rzędzie. Z drugiej strony siatka najlepiej układa elementy w wielu kolumnach i wierszach.
Przyjrzyjmy się siatce w CSS na przykładzie.
Przykład
.main { display: grid; grid: auto auto / auto auto auto auto; grid-gap: 10px; background-color: blue; padding: 10px; } .num { background-color: lightblue; text-align: center; color: black; padding: 10px 10px; font-size: 30px; } One Two Three Four Five Six Seven Eight Przetestuj teraz Wyjście
