justify-items在CSS Grid中不起作用(justify-items not working in CSS Grid)

 我有一个CSS Grid，我正在尝试设置justify-items属性。 
 
 这个（或与之相关的任何其他属性）都不起作用，在我的文本编辑器（atom）中，它显示为灰色，通常表示错误。 
 
 我看过规范，这个属性肯定是规范的一部分，甚至找到了它的视频教程。 
 
 当我使用它虽然它不起作用，我无法理解为什么。 
 
 当我将代码复制到codepen时，它仍然无法正常工作。 
 
 这里的代码： https ：//codepen.io/emilychews/pen/EvLPgJ 
 
 
 
 
 
  
.gridwrapper {
  background: #e6e6e6;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-auto-rows: 100px;
  grid-row-gap: 10px;
  grid-column-gap: 10px;
  justify-items: start; /* THIS LINE ISN'T WORKING */
  align-items: stretch;
}

.gridwrapper div:nth-child(1) {
  grid-column: 1 / 4;
}

.gridwrapper div:nth-child(6) {
  grid-column: 1 / 3;
}

.gridwrapper div {
  padding: 1em;
  background: red;
  border: white;
  width: 100%;
  color: white;
  box-sizing: border-box;
}

.gridwrapper div:nth-child(odd) {
  background: blue;
}
 
  
<div class="gridwrapper">
  <div class="grid double-col double-row">1</div>
  <div class="grid">2</div>
  <div class="grid">3</div>
  <div class="grid">4</div>
  <div class="grid">5</div>
  <div class="grid">6</div>
  <div class="grid">7</div>
  <div class="grid">8</div>
</div>
 
 
 
 

I've a CSS Grid, and I'm trying to set the justify-items property to start.
 
This (or any of the other properties relating to it) aren't working and in my text editor (atom) it is showing as grayed out which usually means an error.
 
I've looked at the specification and this property is definitely part of the spec and have even found a video tutorial of it working.
 
When I use it though it doesn't work and I can't get my head around why.
 
When I have copied the code to codepen it still does not work.
 
The codepen here: https://codepen.io/emilychews/pen/EvLPgJ
 
 
 
 
 
  
.gridwrapper {
  background: #e6e6e6;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-auto-rows: 100px;
  grid-row-gap: 10px;
  grid-column-gap: 10px;
  justify-items: start; /* THIS LINE ISN'T WORKING */
  align-items: stretch;
}

.gridwrapper div:nth-child(1) {
  grid-column: 1 / 4;
}

.gridwrapper div:nth-child(6) {
  grid-column: 1 / 3;
}

.gridwrapper div {
  padding: 1em;
  background: red;
  border: white;
  width: 100%;
  color: white;
  box-sizing: border-box;
}

.gridwrapper div:nth-child(odd) {
  background: blue;
}
 
  
<div class="gridwrapper">
  <div class="grid double-col double-row">1</div>
  <div class="grid">2</div>
  <div class="grid">3</div>
  <div class="grid">4</div>
  <div class="grid">5</div>
  <div class="grid">6</div>
  <div class="grid">7</div>
  <div class="grid">8</div>
</div>
 
 
 
 

原文：https://stackoverflow.com/questions/45805962