From 4b1a9203c547c019fc5398082ae19a3f3d4c3efe Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:15 -0500 Subject: initial commit --- files/de/web/css/grid-gap/index.html | 177 +++++++++++++++++++++++++++++++++++ 1 file changed, 177 insertions(+) create mode 100644 files/de/web/css/grid-gap/index.html (limited to 'files/de/web/css/grid-gap') diff --git a/files/de/web/css/grid-gap/index.html b/files/de/web/css/grid-gap/index.html new file mode 100644 index 0000000000..8e2956013f --- /dev/null +++ b/files/de/web/css/grid-gap/index.html @@ -0,0 +1,177 @@ +--- +title: grid-gap +slug: Web/CSS/grid-gap +translation_of: Web/CSS/gap +--- +

grid-gap  ist die shorthand CSS Eigenschaft für  {{cssxref("grid-row-gap")}} und {{cssxref("grid-column-gap")}} , welche die Spalten (gutter) zwischen Rasterreihen und Rasterspalten festlegt.

+ +
/* Ein <Länge> Wert */
+grid-gap: 20px;
+grid-gap: 1em;
+grid-gap: 3vmin;
+grid-gap: 0.5cm;
+
+/* Ein <Prozent> Wert */
+grid-gap: 16%;
+grid-gap: 100%;
+
+/* Zwei <Länge> Werte */
+grid-gap: 20px 10px;
+grid-gap: 1em 0.5em;
+grid-gap: 3vmin 2vmax;
+grid-gap: 0.5cm 2mm;
+
+/* Ein or zwei <Prozent> Werte */
+grid-gap: 16% 100%;
+grid-gap: 21px 82%;
+
+/* Globale Werte */
+grid-gap: inherit;
+grid-gap: initial;
+grid-gap: unset;
+
+ +

{{cssinfo}}

+ +

Syntax

+ +

Dieser Eigenschaft wird ein Wert für <'grid-row-gap'> zugeordnet, gefolgt von einem optionalen Wert für <'grid-column-gap'>. Falls <'grid-column-gap'> ausgelassen wird, wird diesem der gleiche Wert zugeordnet wie <'grid-row-gap'>.

+ +

<'grid-row-gap'> und <'grid-column-gap'> werden jeweils angegeben als <Länge> or als <Prozent>.

+ +

Werte

+ +
+
<Länge>
+
Gibt die Breite der Spalte an, welche die Grid-Linien trennt.
+
<Prozent>
+
Ist die prozentuale Breite der Lücke zwischen zwei Rasterlinien im Verhältnis zu der Gesamtgröße des Elements.
+
+ +

Formale Syntax

+ +
{{csssyntax}}
+ +

Beispiel

+ +

HTML Inhalt

+ +
<div id="grid">
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+</div>
+ +

CSS Inhalt

+ +
#grid {
+  display: grid;
+  height: 200px;
+  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
+  grid-gap: 20px 5px;
+}
+
+#grid > div {
+  background-color: lime;
+}
+
+ +

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

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName("CSS3 Grid", "#propdef-grid-gap", "grid-gap")}}{{Spec2("CSS3 Grid")}}Erste Definition
+ +

Browserkompatibilität

+ +

 

+ + + +

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

+ +

 

+ +

Siehe auch

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