freeCodeCamp/curriculum/challenges/german/01-responsive-web-design/css-grid/create-a-column-gap-using-grid-column-gap.md

id, title, challengeType, videoUrl, forumTopicId, dashedName

id	title	challengeType	videoUrl	forumTopicId	dashedName
5a9036ee38fddaf9a66b5d35	Erstelle einen Spaltenabstand mit grid-column-gap	0	https://scrimba.com/p/pByETK/cVZ8vfD	301124	create-a-column-gap-using-grid-column-gap

--description--

In den Rastern, die du bisher erstellt hast, sind die Spalten alle eng aneinander gerückt. Manchmal möchtest du einen Abstand zwischen den Spalten haben. Um einen Abstand zwischen den Spalten einzufügen, verwende die Eigenschaft grid-column-gap wie folgt:

grid-column-gap: 10px;

Dies schafft 10px Leerraum zwischen allen unseren Spalten.

--instructions--

Gib den Spalten des Rasters einen Abstand von 20px.

--hints--

Die Klasse container sollte eine Eigenschaft grid-column-gap besitzen, die den Wert 20px hat.

assert(
  code.match(
    /.container\s*?{[\s\S]*grid-column-gap\s*?:\s*?20px\s*?;[\s\S]*}/gi
  )
);

--seed--

--seed-contents--

<style>
  .d1{background:LightSkyBlue;}
  .d2{background:LightSalmon;}
  .d3{background:PaleTurquoise;}
  .d4{background:LightPink;}
  .d5{background:PaleGreen;}

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


    /* Only change code above this line */
  }
</style>

<div class="container">
  <div class="d1">1</div>
  <div class="d2">2</div>
  <div class="d3">3</div>
  <div class="d4">4</div>
  <div class="d5">5</div>
</div>

--solutions--

<style>.container {grid-column-gap: 20px;}</style>