freeCodeCamp/curriculum/challenges/german/01-responsive-web-design/css-grid/reduce-repetition-using-the-repeat-function.md

id, title, challengeType, videoUrl, forumTopicId, dashedName

id	title	challengeType	videoUrl	forumTopicId	dashedName
5a94fe3669fb03452672e45f	Wiederholungen mit der repeat-Funktion reduzieren	0	https://scrimba.com/p/pByETK/cQvqyHR	301133	reduce-repetition-using-the-repeat-function

--description--

Wenn du grid-template-columns und grid-template-rows verwendet hast, um die Struktur eines Rasters zu definieren, hast du einen Wert für jede Zeile oder Spalte eingegeben, die du erstellt hast.

Nehmen wir an, du willst ein Raster mit 100 Zeilen derselben Höhe. Es ist nicht sehr praktisch, 100 Werte einzeln einzufügen. Glücklicherweise gibt es einen besseren Weg - indem du die Funktion repeat verwendest, um die Anzahl der Wiederholungen deiner Spalte oder Zeile anzugeben, gefolgt von einem Komma und dem Wert, den du wiederholen willst.

Hier ist ein Beispiel, das ein 100-zeiliges Raster erzeugt, bei dem jede Zeile 50px hoch ist.

grid-template-rows: repeat(100, 50px);

Du kannst auch mehrere Werte mit der Wiederholungsfunktion wiederholen und die Funktion zwischen anderen Werten einfügen, wenn du eine Rasterstruktur definierst. So sieht das aus:

grid-template-columns: repeat(2, 1fr 50px) 20px;

Das heißt übersetzt so viel wie:

grid-template-columns: 1fr 50px 1fr 50px 20px;

Hinweis: Das 1fr 50px wird zweimal wiederholt, gefolgt von 20px.

--instructions--

Verwende repeat, um Wiederholungen aus der Eigenschaft grid-template-columns zu entfernen.

--hints--

Die Klasse container sollte eine grid-template-columns-Eigenschaft besitzen, die auf die Wiederholung von 3 Spalten mit der Breite von 1fr eingestellt ist.

assert(
  code.match(
    /.container\s*?{[\s\S]*grid-template-columns\s*?:\s*?repeat\s*?\(\s*?3\s*?,\s*?1fr\s*?\)\s*?;[\s\S]*}/gi
  )
);

--seed--

--seed-contents--

<style>
  .item1{background:LightSkyBlue;}
  .item2{background:LightSalmon;}
  .item3{background:PaleTurquoise;}
  .item4{background:LightPink;}
  .item5{background:PaleGreen;}

  .container {
    font-size: 40px;
    min-height: 300px;
    width: 100%;
    background: LightGray;
    display: grid;
    /* Only change code below this line */

    grid-template-columns: 1fr 1fr 1fr;

    /* Only change code above this line */
    grid-template-rows: 1fr 1fr 1fr;
    grid-gap: 10px;
  }
</style>

<div class="container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
  <div class="item5">5</div>
</div>

--solutions--

<style>.container {grid-template-columns: repeat(3, 1fr);}</style>