Create a Column Gap grid-column-gap

HTML-CSS
#1

Tell us what’s happening:

Your code so far


<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;
  /* add your code below this line */


  /* add your 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>

Your browser information:

User Agent is: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.100 Safari/537.36.

Challenge: Create a Column Gap Using grid-column-gap

Link to the challenge:
https://www.freecodecamp.org/learn/responsive-web-design/css-grid/create-a-column-gap-using-grid-column-gap

#2

do you have any question?
please tell us what’s going on

#3

If you’re still struggling with it, you need to use the grid-column-gap property (look at the example in the info section of the challenge). Make sure its set to 20 pixels and you should be good to go!
For future reference, checking the “get a hint” button will let you get a hint which will take you to a page like this where you can get help right away instead of writing a post and waiting on someone to reply. Happy coding!

1 Like
#4

Thank You @ilenia and @IamSurrett

1 Like
#5