justify-itemsがCSSグリッドで動作しない

Question

私はCSSグリッドを持っており、justify-itemsプロパティをstartに設定しようとしています。

この（またはそれに関連するその他のプロパティ）は機能しません。テキストエディタ（アトム）では、通常はエラーを意味するグレー表示されています。

私は仕様を見てきましたが、このプロパティは間違いなく仕様の一部であり、ビデオチュートリアルが動作しています。

私はそれを使用すると機能しませんが、私はなぜその周りに頭を浮かべることができません。

codepenにコードをコピーしても、まだ動作しません。

ここ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>

Answer 1

justify-itemsプロパティは、列（いない全体のコンテナ）内の空きスペースを配布することで、グリッドのアイテムを揃えます。

ただし、各項目が列の全幅を占めるため、空き領域がありません。

.gridwrapper div { width: 100% } 

このルールを削除すると、justify-itemsが機能します。

ここでは、より完全な説明です：

• The difference between justify-self, justify-items and justify-content in CSS Grid

revised codepen

.gridwrapper { 
 
    background: #e6e6e6; 
 
    display: grid; 
 
    grid-template-columns: repeat(8, 25px); /* adjustment; otherwise 1fr... */ 
 
    grid-auto-rows: 100px;     /* all free space */ 
 
    grid-row-gap: 10px; 
 
    grid-column-gap: 10px; 
 
    justify-content: end; /* adjustment */ 
 
    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>