无效的属性值CSS值

Question

I have tried the below CSS in multiple browsers and am not having success using the grid-template-columns attribute.

.container {
  background-color: azure;
  display: grid;
  grid-template-columns: 1fr, 1fr, 1fr;
}

The CSS is throwing an error indicating the grid-template-columns is invalid.

Answer 1

That is not the syntax of grid-template-columns values. All you need to do is remove the commas.

 .container { background-color: azure; display: grid; grid-template-columns: 1fr 1fr 1fr; } 

 <div class="container"> <div class="box">1</div> <div class="box">2</div> <div class="box">3</div> </div>