--- title: grid slug: Web/CSS/grid translation_of: Web/CSS/grid ---

grid jest własnością skrótową, która ustawia wszystkie wyraźne oraz domniemane własności grid przy pomocy pojedynczej deklaracji.

{{EmbedInteractiveExample("pages/css/grid.html")}}

Uwaga: Można ustawić jedynie sprecyzowane bądź domniemane wartości w jednej deklaracji własności grid. Podwłasności, których nie określisz zostaną ustawione na wartości początkowe. Własności odstępów nie zostaną zresetowane przez ten zapis skrótowy.

Własności składowe

Ta własność jest zapisem skrótowym następujących własności

Składnia

/* <'grid-template'> values */
grid: none;
grid: "a" 100px "b" 1fr;
grid: [linename1] "a" 100px [linename2];
grid: "a" 200px "b" min-content;
grid: "a" minmax(100px, max-content) "b" 20%;
grid: 100px / 200px;
grid: minmax(400px, min-content) / repeat(auto-fill, 50px);

/* <'grid-template-rows'> /
   [ auto-flow && dense? ] <'grid-auto-columns'>? values */
grid: 200px / auto-flow;
grid: 30% / auto-flow dense;
grid: repeat(3, [line1 line2 line3] 200px) / auto-flow 300px;
grid: [line1] minmax(20em, max-content) / auto-flow dense 40%;

/* [ auto-flow && dense? ] <'grid-auto-rows'>? /
   <'grid-template-columns'> values */
grid: auto-flow / 200px;
grid: auto-flow dense / 30%;
grid: auto-flow 300px / repeat(3, [line1 line2 line3] 200px);
grid: auto-flow dense 40% / [line1] minmax(20em, max-content);

/* Global values */
grid: inherit;
grid: initial;
grid: unset;

Wartości

<'grid-template'>
Definiuje szablon siatki strony - własności grid-template-columns, grid-template-rows oraz grid-template-areas.
<'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>?
Ustawia auto-wyrównanie przy pomocy jawnych wierszy ustawionych własnością grid-template-rows, ustawieniem wartości grid-template-rows na none oraz określeniem w jaki sposób wykonywać automatyczne powtarzanie kolumn przy pomocy grid-auto-columns i ustawienie wartości grid-auto-rows na auto. grid-auto-flow zostaje ustawione na column, jeśli dense jest określone. Wszystkie inne podwłasności grid są ustawiane na wartości początkowe.
[ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>
Ustawia auto-wyrównanie przy pomocy jawnych kolumn ustawionych własnością grid-template-columns, ustawieniem wartości własności grid-template-rows na none oraz określeniem w jaki sposób wykonywać automatyczne powtarzanie wierszy przy pomocy grid-auto-rows i ustawienie wartości grid-auto-columns na auto. grid-auto-flow zostaje ustawione na row, jeśli dense jest określon. Wszystkie inne podwłasności grid są ustawiane na wartości początkowe.

Formalna definicja

{{cssinfo}}

Formalna składna

{{csssyntax}}

Przykłady

Tworzenie układu grid (układ siatki)

HTML

<div id="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

CSS

#container {
  display: grid;
  grid: repeat(2, 60px) / auto-flow 80px;
}

#container > div {
  background-color: #8ca0ff;
  width: 50px;
  height: 50px;
}

Result

{{EmbedLiveSample("Creating_a_grid_layout", "100%", 150)}}

Specyfikacje

Specification Status Comment
{{SpecName("CSS3 Grid", "#propdef-grid", "grid")}} {{Spec2("CSS3 Grid")}} Initial definition

Kompatybilność z wersjami przeglądarek

{{Compat("css.properties.grid")}}

Zobacz także