Przejdź do treści

Centrum Kształcenia Zawodowego i Ustawicznego w Mrągowie

CSS: Właściwości Grid

ś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.

  1. 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.

  2. 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()'.

  3. 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.

  4. 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.

  5. 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'.

  6. 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.

  7. 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).

  8. 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.

  9. 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.

  10. 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'.

  11. grid-auto-flow: Steruje automatycznym umieszczaniem elementów w siatce, określając, czy mają być dodawane w nowych wierszach, czy kolumnach.

Artykuł: Pierwszy dzień w Splicie

Pierwszy dzień w Splicie

Artykuł: OpenSolaris

OpenSolaris

Artykuł: Bob Frankston

Bob Frankston

Artykuł: Staże w Chorwacji

Staże w Chorwacji

Artykuł: 3Com

3Com

Nasze technikum

Technik informatyk

Szkoły dla dorosłych

Nasza szkoła

Pełna oferta edukacyjna

Oferta szkoły