środa,
CSS: Właściwości Grid
CSS Grid Layout to dwuwymiarowy system układu, który umożliwia zarządzanie rozmieszczeniem elementów zarówno w poziomie, jak i w pionie. Poznaj główne właściwości i ich funkcje w CSS Grid.
display: grid; / display: inline-grid; Stosowanie tej właściwości do kontenera powoduje, że staje się on kontenerem grid, 'grid' tworzy blokowy kontener siatki, a 'inline-grid' tworzy kontener siatki w linii.
grid-template-columns / grid-template-rows: Te właściwości definiują kolumny i wiersze siatki, ustawiając ich rozmiary. Możesz używać jednostek stałych (np. px), elastycznych (fr) czy funkcji takich jak 'repeat()' czy 'minmax()'.
grid-column-start / grid-column-end / grid-row-start / grid-row-end: Pozwalają na umieszczenie elementów grid w określonych kolumnach i wierszach, określając ich początek i koniec.
grid-column / grid-row: Skrócone wersje właściwości 'grid-column-start' / 'grid-column-end' i 'grid-row-start' / 'grid-row-end'. Umożliwiają szybkie definiowanie położenia elementów w siatce.
grid-area: Właściwość łączy 'grid-row-start', 'grid-column-start', 'grid-row-end' oraz 'grid-column-end', można użyć tej właściwości do nazwania obszaru w 'grid-template-areas'.
grid-template-areas: Definiuje obszary w siatce przy użyciu nazw i pozwala na ustawienie elementów na siatce przez odniesienie się do tych nazw.
justify-items / align-items: 'justify-items' kontroluje wyrównanie elementów wewnątrz ich komórek siatki wzdłuż osi poziomej (osi x), a 'align-items' wzdłuż osi pionowej (osi y).
justify-content / align-content: Te właściwości kontrolują wyrównanie całej siatki wewnątrz kontenera grid, 'justify-content' dotyczy osi poziomej, a 'align-content' osi pionowej.
gap / row-gap / column-gap: Własność 'gap' określa odstęp między wierszami i kolumnami, 'row-gap' tylko między wierszami, a 'column-gap' tylko między kolumnami.
grid-auto-columns / grid-auto-rows: Określają rozmiar kolumn i wierszy, które nie zostały jawnie zdefiniowane w 'grid-template-columns' / 'grid-template-rows'.
grid-auto-flow: Steruje automatycznym umieszczaniem elementów w siatce, określając, czy mają być dodawane w nowych wierszach, czy kolumnach.
