CSS grid-column

Item 6 has grid-column set to 2 / 5.
The item starts on column 2 and ends before column 5.

<style>
  .grid-container {
    background-color: steelblue;
    padding: 10px;
    display: grid;
    grid-gap: 10px;
    grid-template-columns: auto auto auto auto;
  }

  .grid-container > div {
    background-color: aliceblue;
    text-align: center;
    padding: 15px 5px;
    font-size: 18px;
  }
</style>

<div class="grid-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div style="grid-column: 2 / 5;
              color: white;
              background-color: salmon !important; ">6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
</div> 

grid-column: grid-column-start  [grid-column-end | span n] ;

Note: The end is either specified by a column number, or by the number of column the item spans.

Item 1 has a grid-column value of 1 / span 4.
The item starts at column 1 and covers 4 columns.

<style>
  .grid-container {
    background-color: steelblue;
    padding: 10px;
    display: grid;
    grid-gap: 10px;
    grid-template-columns: auto auto auto auto;
  }

  .grid-container > div {
    background-color: aliceblue;
    text-align: center;
    padding: 15px 5px;
    font-size: 18px;
  }
</style>

<div class="grid-container">
  <div style="grid-column: 1 / span 4;
              color: white;
              background-color: salmon; ">1</div>

  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
</div> 

This table shows when grid-column support started for each browser.

Chrome	57	Mar 2017
Firefox	52	Mar 2017
IE/Edge	16	Sep 2017
Opera	44	Mar 2017
Safari	10	Sep 2016

• Our CSS grid-column-start Property Reference
• Our CSS grid-column-end Property Reference
• Our CSS grid-column-gap Property Reference
• Our CSS Grid Tutorial