Własność CSS grid

Własność grid to własność zbiorcza służąca do ustawiania wszystkich własności siatki jawnej i siatki niejawnej układu CSS Grid w jednej deklaracji. Obejmuje następujące własności indywidualne:

Siatka jawna:

• grid-template-rows
• grid-template-columns
• grid-template-areas

Siatka niejawna:

• grid-auto-rows
• grid-auto-columns
• grid-auto-flow

Wartości i składnia

Własność grid ma składnię podobną do własności grid-template, tylko szerszą, ponieważ obejmuje swoim zakresem także własności z rodziny auto. Poniżej znajduje się opis składni obsługiwanej przez własność grid. Szczegółowy opis składni własności grid-template znajduje się na stronie Własność CSS grid-template.

grid-template-rows / (auto-flow dense) grid-auto-columns

Ustawia wartość własności grid-template-rows. Jeśli za ukośnikiem znajduje się słowo kluczowe auto-flow, to ustawia własność grid-auto-flow na column. Jeśli dodatkowo użyte jest słowo kluczowe dense, powoduje ono włączenie algorytmu gęstego rozmieszczenia elementów. Pominięcie własności grid-auto-columns powoduje ustawienie jej na auto. Na przykład:

grid: [linia1] 100px [linia2] 200px / auto-flow dense 400px;

Ta deklaracja jest równoznaczna z poniższymi:

grid-template-rows: [linia1] 100px [linia2] 200px;
grid-auto-columns: 400px;
grid-auto-flow: column dense;

(auto-flow dense) grid-auto-rows / grid-template-columns

Ustawia wartość własności grid-template-columns. Jeśli przed ukośnikiem znajduje się słowo kluczowe auto-flow, to ustawia własność grid-auto-flow na row. Jeśli dodatkowo użyte jest słowo kluczowe dense, powoduje ono włączenie algorytmu gęstego rozmieszczenia elementów. Pominięcie własności grid-auto-rows powoduje ustawienie jej na auto. Na przykład:

grid: auto-flow dense 200px / [linia1] 300px [linia2] 400px;

Ta deklaracja jest równoznaczna z poniższymi:

grid-template-columns: [linia1] 300px [linia2] 400px;
grid-auto-rows: 200px;
grid-auto-flow: row dense;

Podsumowanie