I'm facing an issue with my CSS Grid. I am attempting to set the justify-items property to start.
Despite referencing the specification and watching a tutorial where it works, the property (and related ones) are not functioning as expected. In my text editor (Atom), they appear grayed out, which typically indicates an error.
Even when copying the code to Codepen for testing purposes, the property still does not work.
You can view 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>