CSS CSS Grid Layout Flexible Sized Grids Auto-generate Flexible Columns

Brandon Joseph
Brandon Joseph
967 Points

Not sure what's wrong.

Use repeat notation to declare column tracks. The repeat value should be the keyword that collapses any empty tracks and auto-generates columns to fit the available space. Then, set the track sizes using the function that sets a track's minimum and maximum size. The min size should be 300px, and the max size should be 1 fraction of the available space.

style.css
/* Complete the challenge by writing CSS below */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit minmax(300px 1fr)

}
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="grid">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div> 
    </div>
  </body>
</html>

1 Answer

Steven Parker
Steven Parker
131,121 Points

You have the correct values, but a few format (punctuation) issues:

  • the comma that should separate the arguments of the "repeat" function is missing
  • the comma that should separate the arguments of the "minmax" function is missing
  • the parentheses are unbalanced, a closing parenthesis is missing from the end