Files

Oliver Eyton-Williams 0bd52f8bd1 Feat: add new Markdown parser (#39800 )

and change all the challenges to new `md` format.

2020-11-27 10:02:05 -08:00

1.6 KiB

Raw Blame History

id, title, challengeType, videoUrl, forumTopicId

id	title	challengeType	videoUrl	forumTopicId
5a9036ee38fddaf9a66b5d37	Add Gaps Faster with grid-gap	0	https://scrimba.com/p/pByETK/ca2qVtv	301118

--description--

grid-gap is a shorthand property for grid-row-gap and grid-column-gap from the previous two challenges that's more convenient to use. If grid-gap has one value, it will create a gap between all rows and columns. However, if there are two values, it will use the first one to set the gap between the rows and the second value for the columns.

--instructions--

Use grid-gap to introduce a 10px gap between the rows and 20px gap between the columns.

--hints--

container class should have a grid-gap property that introduces 10px gap between the rows and 20px gap between the columns.

assert(
  code.match(
    /.container\s*?{[\s\S]*grid-gap\s*?:\s*?10px\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-gap: 10px 20px;}</style>

1.6 KiB Raw Blame History