freeCodeCamp/create-your-first-css-grid.english.md at 120bb342e8e5140478e71ec3c3e348a8b305ea80

Oliver Eyton-Williams bd68b70f3d

Feat: hide blocks not challenges (#39504 )

* fix: remove isHidden flag from frontmatter

* fix: add isUpcomingChange

Co-authored-by: Ahmad Abdolsaheb <ahmad.abdolsaheb@gmail.com>

* feat: hide blocks not challenges

Co-authored-by: Ahmad Abdolsaheb <ahmad.abdolsaheb@gmail.com>

Co-authored-by: Ahmad Abdolsaheb <ahmad.abdolsaheb@gmail.com>

2020-09-03 15:07:40 -07:00

1.7 KiB

Raw Blame History

id, title, challengeType, videoUrl, forumTopicId

id	title	challengeType	videoUrl	forumTopicId
5a858944d96184f06fd60d61	Create Your First CSS Grid	0	https://scrimba.com/p/pByETK/cqwREC4	301129

Description

Turn any HTML element into a grid container by setting its display property to grid. This gives you the ability to use all the other properties associated with CSS Grid. Note: In CSS Grid, the parent element is referred to as the container and its children are called items.

Instructions

Change the display of the div with the container class to grid.

Tests

tests:
  - text: <code>container</code> class should have a <code>display</code> property with a value of <code>grid</code>.
    testString: assert(code.match(/.container\s*?{[\s\S]*display\s*?:\s*?grid\s*?;[\s\S]*}/gi));

Challenge Seed

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

  .container {
    font-size: 40px;
    width: 100%;
    background: LightGray;
    /* 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>

Solution

var code = ".container {display: grid;}"

1.7 KiB Raw Blame History