grid

To tłumaczenie jest niepełne. Pomóż przetłumaczyć ten artykuł z języka angielskiego

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

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

Wartość początkowaas each of the properties of the shorthand:
Stosowana dogrid containers
Dziedziczonano
Percentagesas each of the properties of the shorthand:
Wartość wyliczonaas each of the properties of the shorthand:
  • grid-template-rows: as specified, but with relative lengths converted into absolute lengths
  • grid-template-columns: as specified, but with relative lengths converted into absolute lengths
  • grid-template-areas: jako określone
  • grid-auto-rows: the percentage as specified or the absolute length
  • grid-auto-columns: the percentage as specified or the absolute length
  • grid-auto-flow: jako określone
  • grid-column-gap: the percentage as specified or the absolute length
  • grid-row-gap: the percentage as specified or the absolute length
  • column-gap: as specified, with <length>s made absolute, and normal computing to zero except on multi-column elements
  • row-gap: as specified, with <length>s made absolute, and normal computing to zero except on multi-column elements
Animation typediscrete

Formalna składna

<'grid-template'> | <'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>? | [ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>

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

Specyfikacje

Specification Status Comment
CSS Grid Layout
The definition of 'grid' in that specification.
Candidate Recommendation Initial definition

Kompatybilność z wersjami przeglądarek

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
gridChrome Full support 57
Full support 57
Full support 29
Disabled
Disabled From version 29: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Edge Full support 16Firefox Full support 52
Full support 52
No support 40 — 59
Disabled
Disabled From version 40 until version 59 (exclusive): this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 44
Full support 44
Full support 28
Disabled
Disabled From version 28: this feature is behind the Enable experimental Web Platform features preference.
Safari Full support 10.1WebView Android Full support 57Chrome Android Full support 57
Full support 57
Full support 29
Disabled
Disabled From version 29: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Firefox Android Full support 52
Full support 52
No support 40 — 59
Disabled
Disabled From version 40 until version 59 (exclusive): this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Full support 43
Full support 43
Full support 28
Disabled
Disabled From version 28: this feature is behind the Enable experimental Web Platform features preference.
Safari iOS Full support 10.3Samsung Internet Android Full support 6.0
Notes
Full support 6.0
Notes
Notes This was added early so is out of sync with the equivalent Chromium version.

Legend

Full support  
Full support
No support  
No support
See implementation notes.
See implementation notes.
User must explicitly enable this feature.
User must explicitly enable this feature.

Zobacz także