freeCodeCamp/align-all-items-vertically-using-align-items.english.md at fde8c05a20b0a49cb4b11bad2df57ed0d460a0fc

Files

Randell Dawson 41718abf76 fix(learn): consolidate comments for responsive web design cert (#38256 )

Related to PR #38040

This PR is an attempt to consolidate/remove as many comments in the challenge seed code in the Responsive Web Design certification challenges, to be able to create a small translation lookup object for translating the English comments to other languages.

2020-02-27 20:50:46 +05:30

1.6 KiB

Raw Blame History

id, title, challengeType, videoUrl, forumTopicId

id	title	challengeType	videoUrl	forumTopicId
5a94fdf869fb03452672e45b	Align All Items Vertically using align-items	0	https://scrimba.com/p/pByETK/ckzPeUv	301121

Description

Using the align-items property on a grid container will set the vertical alignment for all the items in our grid.

Instructions

Use it now to move all the items to the end of each cell.

Tests

tests:
  - text: <code>container</code> class should have a <code>align-items</code> property that has the value of <code>end</code>.
    testString: assert(code.match(/.container\s*?{[\s\S]*align-items\s*?:\s*?end\s*?;[\s\S]*}/gi));

Challenge Seed

<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;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-gap: 10px;
    /* Only change code below this line */

    
    /* Only change code above this line */
  }
</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>

Solution

var code = ".container {align-items: end;}"

1.6 KiB Raw Blame History