initial commit

1 files changed, 194 insertions, 0 deletions

diff --git a/files/de/web/css/grid-template-areas/index.html b/files/de/web/css/grid-template-areas/index.html
new file mode 100644
index 0000000000..57ceda4481
--- /dev/null
+++ b/files/de/web/css/grid-template-areas/index.html
@@ -0,0 +1,194 @@
+---
+title: grid-template-areas
+slug: Web/CSS/grid-template-areas
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Grid
+  - CSS Property
+  - Reference
+  - Referenz
+translation_of: Web/CSS/grid-template-areas
+---
+<p>Die <strong><code>grid-template-areas</code></strong> CSS Eigenschaft spezifiziert benannte {{glossary("grid areas")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/grid-template-areas.html")}}</div>
+
+<p class="hidden">Der Code für dieses interaktive Beispiel befindet sich in einem GitHub repository. Wenn du zum interaktiven Beispielprojekt beitragen möchtest klone bitte <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> und sende uns einen pull request.</p>
+
+<p>Diese areas sind nicht mit einem bestimmten grid item assoziiert, sondern können von den grid-placement Eigenschaften {{cssxref("grid-row-start")}}, {{cssxref("grid-row-end")}}, {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}}, und ihren Kurzformen  {{cssxref("grid-row")}}, {{cssxref("grid-column")}}, und {{cssxref("grid-area")}} referenziert werden.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: css no-line-numbers">/* Keyword value */
+grid-template-areas: none;
+
+/* &lt;string&gt; 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;
+</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Der grid container definiert keine benannten grid areas.</dd>
+ <dt><code>{{cssxref("&lt;string&gt;")}}+</code></dt>
+ <dd>Für jeden seperaten String wird eine Reihe, und für jede Zelle in dem String wird eine Spalte erstellt. Mehrere benannte Zelltokens innerhalb und zwischen den Reihen sind eine einzelne benannte grid area welche die entsprechenden grid Zellen überspannt. Wenn diese Zellen kein Quader formen ist de Deklaration ungültig.</dd>
+</dl>
+
+<h3 id="Formaler_Syntax">Formaler Syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<p><font face="x-locale-heading-primary, zillaslab, Palatino, Palatino Linotype, x-locale-heading-secondary, serif"><span style="font-size: 40px;"><strong>Beispiel</strong></span></font></p>
+
+<p>
+ </p><h3 id="HTML">HTML</h3>
+<p></p>
+
+<pre class="brush: html">&lt;section id="page"&gt;
+  &lt;header&gt;Header&lt;/header&gt;
+  &lt;nav&gt;Navigation&lt;/nav&gt;
+  &lt;main&gt;Main area&lt;/main&gt;
+  &lt;footer&gt;Footer&lt;/footer&gt;
+&lt;/section&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css; highlight[5-7]">#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 &gt; header {
+  grid-area: head;
+  background-color: #8ca0ff;
+}
+
+#page &gt; nav {
+  grid-area: nav;
+  background-color: #ffa08c;
+}
+
+#page &gt; main {
+  grid-area: main;
+  background-color: #ffff64;
+}
+
+#page &gt; footer {
+  grid-area: foot;
+  background-color: #8cffa0;
+}
+</pre>
+
+<h3 id="Ergebnis">Ergebnis</h3>
+
+<p><em>{{EmbedLiveSample("Example", "100%", "250px")}}</em></p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Grid", "#propdef-grid-template-areas", "grid-template-areas")}}</td>
+   <td>{{Spec2("CSS3 Grid")}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_kompatibilität">Browser kompatibilität</h2>
+
+<p> </p>
+
+<div class="hidden">Die Kompatibilitätstabelle auf dieser Seite wird von struktorierten Daten generiert. Wenn du zu diesen Daten beitragen möchtest, schau unter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> und sende uns einen pull request.</div>
+
+<p>{{Compat("css.properties.grid-template-areas")}}</p>
+
+<p> </p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>Verwandte CSS Eigenschaften: {{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}}, {{cssxref("grid-template")}}</li>
+ <li>Grid Layout Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></em></li>
+ <li>Video Tutorial: <em><a href="http://gridbyexample.com/video/grid-template-areas/">Grid Template Areas</a></em></li>
+</ul>
+
+<section class="Quick_links" id="Quick_Links">
+<ol>
+ <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
+ <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li>
+ <li data-default-state="open"><a href="#"><strong>Guides</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basics concepts of grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Properties</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Glossary</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li>
+   <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li>
+  </ol>
+ </li>
+</ol>
+</section>