From 1109132f09d75da9a28b649c7677bb6ce07c40c0 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:45 -0500 Subject: initial commit --- files/es/web/css/grid-template-areas/index.html | 233 ++++++++++++++++++++++++ 1 file changed, 233 insertions(+) create mode 100644 files/es/web/css/grid-template-areas/index.html (limited to 'files/es/web/css/grid-template-areas') diff --git a/files/es/web/css/grid-template-areas/index.html b/files/es/web/css/grid-template-areas/index.html new file mode 100644 index 0000000000..b97dd3ef69 --- /dev/null +++ b/files/es/web/css/grid-template-areas/index.html @@ -0,0 +1,233 @@ +--- +title: grid-template-areas +slug: Web/CSS/grid-template-areas +translation_of: Web/CSS/grid-template-areas +--- +

La propiedad CSS grid-template-areas especifica nombres para cada una de las {{glossary("grid areas")}}.

+ +
/* Keyword value */
+grid-template-areas: none;
+
+/* <string> values */
+grid-template-areas: "a b";
+grid-template-areas: "a b b"
+                     "a c d";
+
+/* Global values */
+grid-template-areas: inherit;
+grid-template-areas: initial;
+grid-template-areas: unset;
+
+ +

Estas áreas no están asociadas a ningún elemento particular de la cuadrícula, pero pueden referenciarse desde otras propiedades de posicionamiento en la cuadrícula: {{cssxref("grid-row-start")}}, {{cssxref("grid-row-end")}}, {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}}, y sus formas abreviadas {{cssxref("grid-row")}}, {{cssxref("grid-column")}}, and {{cssxref("grid-area")}}.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +

Valores

+ +
+
none
+
El contenedor de la cuadrícula no define ningún nombre para las áreas de la cuadrícula.
+
<string>+
+
Las filas se crean listando líneas de cadenas separadas, mientras que las columnas se reflejan en cada una de las celdas que aparecen en la cadena. Multiple named cell tokens within and between rows create a single named grid area that spans the corresponding grid cells. Unless those cells form a rectangle, the declaration is invalid.
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Example

+ +

HTML

+ +
<section id="page">
+  <header>Header</header>
+  <nav>Navigation</nav>
+  <main>Main area</main>
+  <footer>Footer</footer>
+</section>
+ +

CSS

+ +
#page {
+  display: grid;
+  width: 100%;
+  height: 250px;
+  grid-template-areas: "head head"
+                       "nav  main"
+                       "nav  foot";
+  grid-template-rows: 50px 1fr 30px;
+  grid-template-columns: 150px 1fr;
+}
+
+#page > header {
+  grid-area: head;
+  background-color: #8ca0ff;
+}
+
+#page > nav {
+  grid-area: nav;
+  background-color: #ffa08c;
+}
+
+#page > main {
+  grid-area: main;
+  background-color: #ffff64;
+}
+
+#page > footer {
+  grid-area: foot;
+  background-color: #8cffa0;
+}
+
+ +

Result

+ +

{{EmbedLiveSample("Example", "100%", "250px")}}

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS3 Grid", "#propdef-grid-template-areas", "grid-template-areas")}}{{Spec2("CSS3 Grid")}}Initial definition
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome("57.0")}}[1]{{CompatNo}}[3]{{CompatGeckoDesktop("52.0")}}[2]{{CompatNo}}[3]{{CompatOpera(44)}}[4]{{CompatSafari(10.1)}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroid WebviewChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatChrome("57.0")}}[1]{{CompatChrome("57.0")}}[1]{{CompatGeckoMobile("52.0")}}[2]{{CompatNo}}[3]{{CompatOperaMobile(44)}}{{CompatSafari(10.3)}}
+
+ +

[1] Implemented behind the experimental Web Platform features flag in chrome://flags since Chrome 29.0.

+ +

[2] Implemented behind the preference layout.css.grid.enabled since Gecko 40.0 {{geckoRelease("40.0")}}, defaulting to false. Since Gecko 52.0 {{geckoRelease("52.0")}} it is enabled by default.

+ +

[3] Internet Explorer and Edge implement an older version of the specification, which doesn't define this property.

+ +

[4] Implemented behind the Enable experimental Web Platform features flag in chrome://flags since Opera 28.0.

+ +

See also

+ + + + -- cgit v1.2.3-54-g00ecf