How do I align a css grid track?

hoodedvul

A CSS grid track is the space between the space between two adjacent grid lines, essentially, the space in-between the grid items.

Also see: How do I align css grid items? we saw how to align grid items.

The demo code:

HTML

...
<div class="container">
      <div class="item item1">item 1</div>
      <div class="item item2">item 2</div>
      <div class="item item3">item 3</div>
      <div class="item item4">item 4</div>
      <div class="item item5">item 5</div>
      <div class="item item6">item 6</div>
      <div class="item item5">item 7</div>
      <div class="item item6">item 8</div>
</div>
...

CSS

...
.container {
        width: 800px;
        height: 700px;
        background-color: rgb(95, 118, 133);
        margin: 40px auto;
        display: grid;
        grid-template-columns: repeat(2, 120px);
        grid-template-rows: repeat(4, 120px);
        grid-gap: 30px;
      }

      .item {
        padding: 10px;
        font-size: 30px;
        color: #ffffff;
      }

      .item1 {
        background-color: plum;
      }

      .item2 {
        background-color: mediumvioletred;
      }

      .item3 {
        background-color: chocolate;
      }

      .item4 {
        background-color: darkgreen;
      }

      .item5 {
        background-color: firebrick;
      }

      .item6 {
        background-color: olivedrab;
      }

      .item7 {
        background-color: navy;
      }

      .item8 {
        background-color: yellow;
      }
...

The result is:

The CSS properties that can be used to align CSS grid track are the same as aligning items.

Adding justify-content: end; to the CSS container.

The result is:

justify-content: space-between;

The result is:

There are other options for CSS justify-content property.

To align vertically we use align-content

Adding align-content: end to the CSS container.

The result is:

align-content: space-around

The result is:

align-content: space-evenly

The result is:

There are other options for CSS align-content property