challenge task 4 of 4 finally, apply 20px gutters between rows and columns.

Question

gutters between rows and columns where i don't understand?

style.css

/* Complete the challenge by writing CSS below */
.container{
max-width: 1200px;
display: grid;
grid-template-rows: 200px 300px 100px;
grid-template-columns: 200px 400px 200px;
}

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>CSS Grid Layout</title>
      <link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
    <link href="page.css" rel="stylesheet">
    <link href="style.css" rel="stylesheet">
  </head>
  <body>
    <div class="container">
      <div>1</div>
      <div>2</div>
      <div>3</div>   
    </div>
  </body>
</html>

Answer 1 · 2021-03-24T21:34:48Z

March 24, 2021 9:34pm

Hi Isaiah!

Task 4 is asking you to set the grid-gap property.

And make sure to indent two spaces for the property values. It makes the code much easier to read.

Like this:

/* Complete the challenge by writing CSS below */
.container{
  max-width: 1200px;
  display: grid;
  grid-template-rows: 200px 300px 100px;
  grid-template-columns: 200px 400px 200px;
  grid-gap: 20px; /***  This is what was missing for task 4  ***/
}