diff options
Diffstat (limited to 'files/de/glossary/gutters/index.html')
| -rw-r--r-- | files/de/glossary/gutters/index.html | 72 |
1 files changed, 72 insertions, 0 deletions
diff --git a/files/de/glossary/gutters/index.html b/files/de/glossary/gutters/index.html new file mode 100644 index 0000000000..062ae66c1e --- /dev/null +++ b/files/de/glossary/gutters/index.html @@ -0,0 +1,72 @@ +--- +title: Gutters +slug: Glossary/Gutters +tags: + - CSS Grid +translation_of: Glossary/Gutters +--- +<p>Die Zwischenräume zwischen den Inhaltsbereichen sind <em>gutters </em>oder <em>alleys</em>. Diese können im CSS Grid Layout über die Eigenschaften <code>grid-column-gap</code>, <code>grid-row-gap</code> oder <code>grid-gap</code> erstellt werden.</p> + +<p>Im folgenden Beispiel haben wir ein dreispaltiges und zweireihiges Grid mit 20-Pixel-Lücken zwischen den Spalten und 20-Pixel-Lücken zwischen den Reihen.</p> + +<div id="example_1"> +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #fff8f8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(3,1.2fr); + grid-auto-rows: 45%; + grid-column-gap: 20px; + grid-row-gap: 20px; +} +</pre> + +<pre class="brush: html"><div class="wrapper"> + <div>One</div> + <div>Two</div> + <div>Three</div> + <div>Four</div> + <div>Five</div> +</div> +</pre> + +<p>{{ EmbedLiveSample('example_1', '300', '280') }}</p> +</div> + +<p>In Bezug auf die Gridgröße verhalten sich die Zwischenräume (gaps) wie eine normale Spalte oder Reihe, jedoch kann nichts darin platziert werden. Der Abstand wirkt so, als ob die Gitterlinie an dieser Stelle eine zusätzlichen Platz bekommen hätte, so dass jedes nach dieser Linie platzierte Grid-Element am Ende des Abstandes beginnt.</p> + +<p>Die Grid-Gap-Eigenschaften sind nicht das Einzige, was dazu führen kann, dass Reihen oder Spalten überlaufen. Margins, Padding oder die Verwendung der Raumverteilungseigenschaften im <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box Alignment </a>können alle zum sichtbaren Spalt beitragen - daher sollten die Grid-Gap-Eigenschaften nicht gleich "der Rastergröße" gesehen werden, es sei denn, Sie wissen, dass Ihr Entwurf nicht mit einer dieser Methoden zusätzlichen Raum geschaffen hat.</p> + +<h2 id="Erfahren_Sie_mehr">Erfahren Sie mehr</h2> + +<h3 id="Eigenschaftsreferenz">Eigenschaftsreferenz</h3> + +<ul> + <li>{{cssxref("grid-column-gap")}}</li> + <li>{{cssxref("grid-row-gap")}}</li> + <li>{{cssxref("grid-gap")}}</li> +</ul> + +<h3 id="Weiterführende_Informationen">Weiterführende Informationen</h3> + +<ul> + <li>CSS Grid Layout Anleitung: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basic concepts of grid layout</a></em></li> + <li><a href="https://drafts.csswg.org/css-grid/#gutters">Definition of gutters in the CSS Grid Layout specification</a></li> +</ul> |