Why isn't grid item shifting to the end?

Question

I'm trying to send the word "Contact" to the end of the grid but it doesn't seem to move at all.

I'm new at using CSS Grid properties so Im not sure what I'm doing wrong. I have a grid container for all the elements in the page and also a "green" class that contains all the words with a green background. I gave "Contact" an id so I could move just that one word but again, nothing happens.

.container {
  display: grid;
  grid-gap: 0px;
  grid-template-columns: auto;
  grid-template-rows: auto;
}

.green {
  grid-column-start: 1;
  grid-column-end: 4;
}

#Contact {
  justify-self: end;
}

.zone {
  padding: 30px 50px;
  cursor: pointer;
  display: inline-block;
  color: #FFF;
  font-size: 2em;
  border-radius: 4px;
  border: 1px solid #bbb;
  transition: all 0.3s linear;
}

.zone:hover {
  -webkit-box-shadow: rgba(0, 0, 0, 0.8) 0px 5px 15px, inset rgba(0, 0, 0, 0.15) 0px -10px 20px;
  -moz-box-shadow: rgba(0, 0, 0, 0.8) 0px 5px 15px, inset rgba(0, 0, 0, 0.15) 0px -10px 20px;
  -o-box-shadow: rgba(0, 0, 0, 0.8) 0px 5px 15px, inset rgba(0, 0, 0, 0.15) 0px -10px 20px;
  box-shadow: rgba(0, 0, 0, 0.8) 0px 5px 15px, inset rgba(0, 0, 0, 0.15) 0px -10px 20px;
}


/*https://paulund.co.uk/how-to-create-shiny-css-buttons*/


/***********************************************************************
 *  Green Background
 **********************************************************************/

.green {
  background: #56B870;
  /* Old browsers */
  background: -moz-linear-gradient(top, #56B870 0%, #a5c956 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #56B870), color-stop(100%, #a5c956));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #56B870 0%, #a5c956 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #56B870 0%, #a5c956 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #56B870 0%, #a5c956 100%);
  /* IE10+ */
  background: linear-gradient(top, #56B870 0%, #a5c956 100%);
  /* W3C */
}


/***********************************************************************
 *  Red Background
 **********************************************************************/

.red {
  background: #C655BE;
  /* Old browsers */
  background: -moz-linear-gradient(top, #C655BE 0%, #cf0404 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #C655BE), color-stop(100%, #cf0404));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #C655BE 0%, #cf0404 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #C655BE 0%, #cf0404 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #C655BE 0%, #cf0404 100%);
  /* IE10+ */
  background: linear-gradient(top, #C655BE 0%, #cf0404 100%);
  /* W3C */
}


/***********************************************************************
 *  Yellow Background
 **********************************************************************/

.yellow {
  background: #F3AAAA;
  /* Old browsers */
  background: -moz-linear-gradient(top, #F3AAAA 0%, #febf04 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #F3AAAA), color-stop(100%, #febf04));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #F3AAAA 0%, #febf04 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #F3AAAA 0%, #febf04 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #F3AAAA 0%, #febf04 100%);
  /* IE10+ */
  background: linear-gradient(top, #F3AAAA 0%, #febf04 100%);
  /* W3C */
}


/***********************************************************************
 *  Blue Background
 **********************************************************************/

.blue {
  background: #7abcff;
  /* Old browsers */
  background: -moz-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #7abcff), color-stop(44%, #60abf8), color-stop(100%, #4096ee));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%);
  /* IE10+ */
  background: linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%);
  /* W3C */
}

<div class="container">
  <div class="zone green">
    <span>About</span>
    <span>Products</span>
    <span>Our Team</span>
    <span id="Contact">Contact</span>
  </div>
  <div class="zone red">Cover</div>
  <div class="zone blue">Project Grid</div>
  <div class="zone yellow">Footer</div>
</div>

Michael Benjamin · Answer 1 · 2020-03-30T17:34:42.803

First, "Contact" in the HTML is an ID. But in the CSS it's a class.

Second, #contact { justify-self: end } won't work because the parent isn't a grid container.

Here's a simple solution using a nested flex container:

.container {
  display: grid;
}

.green {
  grid-column-start: 1;
  grid-column-end: 4;
  display: flex; /* new */
}

#Contact {
  margin-left: auto; /* new */
}

.zone {
  padding: 30px 50px;
  cursor: pointer;
  /* display: inline-block; */ /* unnecessary; also, interferes with specificity */
  color: #FFF;
  font-size: 2em;
  border-radius: 4px;
  border: 1px solid #bbb;
  transition: all 0.3s linear;
}

.zone:hover {
  -webkit-box-shadow: rgba(0, 0, 0, 0.8) 0px 5px 15px, inset rgba(0, 0, 0, 0.15) 0px -10px 20px;
  -moz-box-shadow: rgba(0, 0, 0, 0.8) 0px 5px 15px, inset rgba(0, 0, 0, 0.15) 0px -10px 20px;
  -o-box-shadow: rgba(0, 0, 0, 0.8) 0px 5px 15px, inset rgba(0, 0, 0, 0.15) 0px -10px 20px;
  box-shadow: rgba(0, 0, 0, 0.8) 0px 5px 15px, inset rgba(0, 0, 0, 0.15) 0px -10px 20px;
}


/*https://paulund.co.uk/how-to-create-shiny-css-buttons*/


/***********************************************************************
 *  Green Background
 **********************************************************************/

.green {
  background: #56B870;
  /* Old browsers */
  background: -moz-linear-gradient(top, #56B870 0%, #a5c956 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #56B870), color-stop(100%, #a5c956));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #56B870 0%, #a5c956 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #56B870 0%, #a5c956 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #56B870 0%, #a5c956 100%);
  /* IE10+ */
  background: linear-gradient(top, #56B870 0%, #a5c956 100%);
  /* W3C */
}


/***********************************************************************
 *  Red Background
 **********************************************************************/

.red {
  background: #C655BE;
  /* Old browsers */
  background: -moz-linear-gradient(top, #C655BE 0%, #cf0404 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #C655BE), color-stop(100%, #cf0404));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #C655BE 0%, #cf0404 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #C655BE 0%, #cf0404 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #C655BE 0%, #cf0404 100%);
  /* IE10+ */
  background: linear-gradient(top, #C655BE 0%, #cf0404 100%);
  /* W3C */
}


/***********************************************************************
 *  Yellow Background
 **********************************************************************/

.yellow {
  background: #F3AAAA;
  /* Old browsers */
  background: -moz-linear-gradient(top, #F3AAAA 0%, #febf04 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #F3AAAA), color-stop(100%, #febf04));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #F3AAAA 0%, #febf04 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #F3AAAA 0%, #febf04 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #F3AAAA 0%, #febf04 100%);
  /* IE10+ */
  background: linear-gradient(top, #F3AAAA 0%, #febf04 100%);
  /* W3C */
}


/***********************************************************************
 *  Blue Background
 **********************************************************************/

.blue {
  background: #7abcff;
  /* Old browsers */
  background: -moz-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #7abcff), color-stop(44%, #60abf8), color-stop(100%, #4096ee));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%);
  /* IE10+ */
  background: linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%);
  /* W3C */
}

<div class="container">
  <div class="zone green">
    <span>About</span>
    <span>Products</span>
    <span>Our Team</span>
    <span id="Contact">Contact</span>
  </div>
  <div class="zone red">Cover</div>
  <div class="zone blue">Project Grid</div>
  <div class="zone yellow">Footer</div>
</div>

Thanks, this worked. Can you explain why though? More specifically like why you used flex and why you commented out ```display: inline-block;```? — Cris, Mar 30 '20 at 17:40
If you don't remove `display: inline-block` it will override `display: flex` because it comes later in the cascade and has the same [**specificity level**](https://stackoverflow.com/a/35657646/3597276). — Michael Benjamin, Mar 30 '20 at 17:50
It's also unnecessary because `display: flex` lines up all child elements, by default. — Michael Benjamin, Mar 30 '20 at 17:51
I used flex only because it's a simple and easy solution. See this post for a more complete explanation: https://stackoverflow.com/q/45536537/3597276 — Michael Benjamin, Mar 30 '20 at 17:52

score 2 · Accepted Answer · answered Mar 30 '20 at 17:35

The grid is applied to .container and doesn't affect .zone.green. Make .zone.green a flexbox instead:

.zone.green{
  display: flex;
}
.zone.green span{
  margin-left: 10px;
}

.zone.green span#Contact{
  margin-left: auto;
}

.zone.green{
  display: flex;
}
.zone.green span{
  margin-left: 10px;
}

.zone.green span#Contact{
  margin-left: auto;
}

.container {
  display: grid;
  grid-gap: 0px;
  grid-template-columns: auto;
  grid-template-rows: auto;
}

.green {
  grid-column-start: 1;
  grid-column-end: 4;
}

#Contact {
  justify-self: end;
}

.zone {
  padding: 30px 50px;
  cursor: pointer;
  display: inline-block;
  color: #FFF;
  font-size: 2em;
  border-radius: 4px;
  border: 1px solid #bbb;
  transition: all 0.3s linear;
}

.zone:hover {
  -webkit-box-shadow: rgba(0, 0, 0, 0.8) 0px 5px 15px, inset rgba(0, 0, 0, 0.15) 0px -10px 20px;
  -moz-box-shadow: rgba(0, 0, 0, 0.8) 0px 5px 15px, inset rgba(0, 0, 0, 0.15) 0px -10px 20px;
  -o-box-shadow: rgba(0, 0, 0, 0.8) 0px 5px 15px, inset rgba(0, 0, 0, 0.15) 0px -10px 20px;
  box-shadow: rgba(0, 0, 0, 0.8) 0px 5px 15px, inset rgba(0, 0, 0, 0.15) 0px -10px 20px;
}


/*https://paulund.co.uk/how-to-create-shiny-css-buttons*/


/***********************************************************************
 *  Green Background
 **********************************************************************/

.green {
  background: #56B870;
  /* Old browsers */
  background: -moz-linear-gradient(top, #56B870 0%, #a5c956 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #56B870), color-stop(100%, #a5c956));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #56B870 0%, #a5c956 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #56B870 0%, #a5c956 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #56B870 0%, #a5c956 100%);
  /* IE10+ */
  background: linear-gradient(top, #56B870 0%, #a5c956 100%);
  /* W3C */
}


/***********************************************************************
 *  Red Background
 **********************************************************************/

.red {
  background: #C655BE;
  /* Old browsers */
  background: -moz-linear-gradient(top, #C655BE 0%, #cf0404 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #C655BE), color-stop(100%, #cf0404));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #C655BE 0%, #cf0404 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #C655BE 0%, #cf0404 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #C655BE 0%, #cf0404 100%);
  /* IE10+ */
  background: linear-gradient(top, #C655BE 0%, #cf0404 100%);
  /* W3C */
}


/***********************************************************************
 *  Yellow Background
 **********************************************************************/

.yellow {
  background: #F3AAAA;
  /* Old browsers */
  background: -moz-linear-gradient(top, #F3AAAA 0%, #febf04 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #F3AAAA), color-stop(100%, #febf04));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #F3AAAA 0%, #febf04 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #F3AAAA 0%, #febf04 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #F3AAAA 0%, #febf04 100%);
  /* IE10+ */
  background: linear-gradient(top, #F3AAAA 0%, #febf04 100%);
  /* W3C */
}


/***********************************************************************
 *  Blue Background
 **********************************************************************/

.blue {
  background: #7abcff;
  /* Old browsers */
  background: -moz-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #7abcff), color-stop(44%, #60abf8), color-stop(100%, #4096ee));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%);
  /* IE10+ */
  background: linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%);
  /* W3C */
}

<div class="container">
  <div class="zone green">
    <span>About</span>
    <span>Products</span>
    <span>Our Team</span>
    <span id="Contact">Contact</span>
  </div>
  <div class="zone red">Cover</div>
  <div class="zone blue">Project Grid</div>
  <div class="zone yellow">Footer</div>
</div>

Hey, thanks this worked. Can you explain why I should use flex here? Is there a way to do it with just CSSgrid? — Cris, Mar 30 '20 at 17:48
@Cris you can use gird, but you'll have to use a nested grid or a sub-grid. Since `.zone.green` is only a single row, it's in my opinion easier to just use flex. — symlink, Mar 30 '20 at 17:49

Why isn't grid item shifting to the end?

2 Answers2