grid-column
Określa, w których kolumnach siatki zaczyna się i kończy element.
- Wartość domyślna
auto- Dziedziczona
- Nie
- Animowalna
- nie
- Dotyczy
- elementy grid i elementy pozycjonowane absolutnie w kontenerze grid
- JavaScript
element.style.gridColumn = "1 / 3"
Przykład
#.article {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
}
.article .hero {
grid-column: 1 / -1;
}<div class="article stage">
<div class="box hero">Baner na całą szerokość</div>
<div class="box">1</div><div class="box">2</div><div class="box">3</div><div class="box">4</div>
</div>Definicja i zastosowanie
#Właściwość grid-column to skrót dla grid-column-start i grid-column-end. Linie siatki numerowane są od 1, a zapis 1 / 3 oznacza: zacznij na linii 1, skończ na linii 3, czyli zajmij dwie pierwsze kolumny.
Zamiast linii końcowej możesz podać rozpiętość: span 2 oznacza dwie kolumny od miejsca, w którym element by wypadł. Liczby ujemne liczą od końca, więc 1 / -1 rozciąga element na całą szerokość siatki.
Element z jawną pozycją jest umieszczany jako pierwszy, a pozostałe elementy wypełniają wolne miejsca wokół niego.
Składnia
#grid-column: <początek> [ / <koniec> ]?;Wartości
#Wartości w praktyce
#auto
.target { grid-column: auto; }span 2
.target { grid-column: span 2; }2 / 4
.target { grid-column: 2 / 4; }1 / -1
.target { grid-column: 1 / -1; }Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#grid-column: 1 / -1to najprostszy sposób na element przez całą szerokość siatki, niezależnie od liczby kolumn.spanjest wygodniejszy niż numery linii, gdy nie obchodzi Cię, w której kolumnie element się zacznie.
Powiązane hasła
#- grid-rowOkreśla, w których wierszach siatki zaczyna się i kończy element.
- grid-areaPrzypisuje element do nazwanego obszaru siatki albo ustawia jego wiersze i kolumny naraz.
- grid-template-columnsDefiniuje kolumny siatki: ich liczbę i szerokości.
- grid-auto-flowDecyduje, jak elementy bez określonej pozycji wypełniają siatkę.
Widzisz błąd albo brakuje przykładu? Napisz do nas.