Atrybut grid-column w CSS

Definicja i użycie

Atrybut grid-column określa rozmiar elementu sieciowego oraz jego pozycję w układzie siatki, jest skrótem dla następujących atrybutów:

Zobacz również:

Kurs CSS:Układ siatki CSS

Przykład

Przykład 1

Ustaw "item1", aby zaczynał się od kolumny 1 i obejmował dwie kolumny:

.item1 {
  grid-column: 1 / span 2;
}

Spróbuj sam:

Przykład 2

Możesz użyć wartości linii kolumny zamiast liczby kolumn, które chcesz przekroczyć:

.item1 {
  grid-column: 1 / 3;
}

Spróbuj sam:

Gramatyka CSS

grid-column: grid-column-start / grid-column-end;

Wartość atrybutu

Wartość Opis
grid-column-start Określa, od której kolumny zaczyna się wyświetlanie elementu.
grid-column-end Określa, na której linii kolumny zatrzymać wyświetlanie elementu, lub na ile kolumn przekraczać.

Szczegółowe informacje techniczne

Domyślna wartość: auto / auto
Dziedziczenie: Nie
Tworzenie animacji: Obsługiwane. Zobacz:Atrybuty animacji.
Wersja: Moduł układu siatki CSS Grid Level 1
Gramatyka JavaScript: object.style.gridColumn="2 / span 2"

Obsługa przeglądarki

Liczby w tabeli wskazują na pierwszą wersję przeglądarki, która w pełni obsługuje tę właściwość.

Chrome IE / Edge Firefox Safari Opera
57 16 52 10 44