CSS - Justificar

Items

<!-- index.html -->
<!-- Head starts -->
<style>
  .d1 {
    background-color: lightskyblue;
  }

  .d2 {
    background-color: lightsalmon;
  }

  .d3 {
    background-color: paleturquoise;
  }

  .d4 {
    background-color: lightpink;
  }

  .d5 {
    background-color: palegoldenrod;
  }

  .p5 {
    padding: 5px;
  }

  .container {
    justify-items: center;
    font-size: 40px;
    font-family: monospace;
    width: 100%;
    padding: 5px;
    background-color: lightgrey;
    display: grid;
    /* Three columns */
    grid-template-columns: 1fr 1fr 1fr;
    /* Gap between columns */
    /* column-gap: 5px; */
    /* Two lines */
    grid-template-rows: 1fr 1fr;
    /* Gap between rows */
    /* row-gap: 5px; */
    /* Gap between rows and columns */
    gap: 5px 5px;
  }
</style>
<!-- Style block end -->
<!-- Head ends -->
<!-- Body starts -->
<div class="container">
  <div class="p5 d1">1</div>
  <div class="p5 d2">2</div>
  <div class="p5 d3">3</div>
  <div class="p5 d4">4</div>
  <div class="p5 d5">5</div>
</div>
<!-- Body ends -->

Self

<!-- index.html -->
<!-- Head starts -->
<style>
  .d1 {
    background-color: lightskyblue;
  }

  .d2 {
    background-color: lightsalmon;
    justify-self: center;
  }

  .d3 {
    background-color: paleturquoise;
  }

  .d4 {
    background-color: lightpink;
  }

  .d5 {
    background-color: palegoldenrod;
  }

  .p5 {
    padding: 5px;
  }

  .container {
    font-size: 40px;
    font-family: monospace;
    width: 100%;
    padding: 5px;
    background-color: lightgrey;
    display: grid;
    /* Three columns */
    grid-template-columns: 1fr 1fr 1fr;
    /* Gap between columns */
    /* column-gap: 5px; */
    /* Two lines */
    grid-template-rows: 1fr 1fr;
    /* Gap between rows */
    /* row-gap: 5px; */
    /* Gap between rows and columns */
    gap: 5px 5px;
  }
</style>
<!-- Style block end -->
<!-- Head ends -->
<!-- Body starts -->
<div class="container">
  <div class="p5 d1">1</div>
  <div class="p5 d2">2</div>
  <div class="p5 d3">3</div>
  <div class="p5 d4">4</div>
  <div class="p5 d5">5</div>
</div>
<!-- Body ends -->