<div class="wrapper">
            <h2>GRID - The justify-content Property</h2>
<!--             <div class="icon">&#8595;</div> -->
            <div class="radio_tabs">
                <label class="radio_wrap" data-radio="radio_1">
                    <input type="radio" name="flex" class="input" checked>
                    <span class="radio_mark">
                        space-evenly
                    </span>
                </label>
                <label class="radio_wrap" data-radio="radio_2">
                    <input type="radio" name="flex" class="input">
                    <span class="radio_mark">
                        space-around
                    </span>
                </label>
                <label class="radio_wrap" data-radio="radio_3">
                    <input type="radio" name="flex" class="input">
                    <span class="radio_mark">
                        space-between
                    </span>
                </label>
                <label class="radio_wrap" data-radio="radio_4">
                    <input type="radio" name="flex" class="input">
                    <span class="radio_mark">
                        center
                    </span>
                </label>
                <label class="radio_wrap" data-radio="radio_5">
                    <input type="radio" name="flex" class="input">
                    <span class="radio_mark">
                        start
                    </span>
                </label>
                <label class="radio_wrap" data-radio="radio_6">
                    <input type="radio" name="flex" class="input">
                    <span class="radio_mark">
                        end
                    </span>
                </label>
            </div>


            <div class="content">
                <div class="radio_content radio_1">
                    <h3>justify-content : space-evenly</h3>
                    <div class="grid-parent space-evenly">
                        <div class="grid-child grid-child-1">
                            1
                        </div>
                        <div class="grid-child grid-child-2">
                            2
                        </div>
                        <div class="grid-child grid-child-3">
                            3
                        </div>
                    </div>
                </div>
                <div class="radio_content radio_2">
                    <h3> justify-content : space-around</h3>
                    <div class="grid-parent space-around">
                        <div class="grid-child grid-child-1">
                            1
                        </div>
                        <div class="grid-child grid-child-2">
                            2
                        </div>
                        <div class="grid-child grid-child-3">
                            3
                        </div>
                    </div>
                </div>
                <div class="radio_content radio_3">
                    <h3> justify-content:space-between</h3>
                    <div class="grid-parent space-between">
                        <div class="grid-child grid-child-1">
                            1
                        </div>
                        <div class="grid-child grid-child-2">
                            2
                        </div>
                        <div class="grid-child grid-child-3">
                            3
                        </div>
                    </div>
                </div>
                <div class="radio_content radio_4">
                    <h3> justify-content:center</h3>
                    <div class="grid-parent center">
                        <div class="grid-child grid-child-1">
                            1
                        </div>
                        <div class="grid-child grid-child-2">
                            2
                        </div>
                        <div class="grid-child grid-child-3">
                            3
                        </div>
                    </div>
                </div>
                <div class="radio_content radio_5">
                    <h3> justify-content:start</h3>
                    <div class="grid-parent start">
                        <div class="grid-child grid-child-1">
                            1
                        </div>
                        <div class="grid-child grid-child-2">
                            2
                        </div>
                        <div class="grid-child grid-child-3">
                            3
                        </div>
                    </div>
                </div>
                <div class="radio_content radio_6">
                    <h3> justify-content:end</h3>
                    <div class="grid-parent end">
                        <div class="grid-child grid-child-1">
                            1
                        </div>
                        <div class="grid-child grid-child-2">
                            2
                        </div>
                        <div class="grid-child grid-child-3">
                            3
                        </div>
                    </div>
                </div>
            </div>


        </div>

*{
  margin:0;
  padding:0;
  box-sizing: border-box;
  font-family: 'Exo 2', sans-serif;
}
.wrapper{
  width: 80%;
  height: auto;
  padding: 30px;
  margin: 50px auto;
}
.wrapper .radio_tabs{
  height: 60px;
  background-color: #fff;
  border-radius: 5px;
  margin-bottom: 10px;
  font-size:15px;
  padding: 18px;
  display: flex;
  box-shadow: 0 0 2px rgba(0,0,0,0.1);
}
.wrapper .radio_tabs label{
  margin-right: 15px;
  display: block;
  position: relative;
  cursor: pointer;
  padding-left:28px;
}

.wrapper .radio_tabs label .input:checked ~.radio_mark{
  color: #0075FF;
}

.wrapper .content{
  width: 100%;
  height: calc(100% - 70px);
  background: #fff;
  border: 5px solid #70409F;
  border-radius: 5px;
  padding: 18px;
  box-shadow: 0 0 2px rgba(0,0,0,0.1);
}

h3{
  margin-bottom: 20px;
}
h2{
  text-align: center;
    margin-bottom: 10px;
    font-size: 30px;
    font-weight: bold;
}
.icon {
    text-align: center;
    font-size: 25px;
    margin-bottom: 5px;
}
  .grid-parent{
      display: grid;
      grid-template-columns: 180px 180px 180px;
    }
   .grid-child{
     color: #000;
    padding: 10px;
    margin: 5px;
  font-size: 30px;
  text-align: center;
   }
.grid-child-1{
       background-color:#A6E7FF;
   }
   .grid-child-2{
        background-color: #FFDDD3;
   }
   .grid-child-3{
        background-color: #E6D0F7;
   }
   .space-evenly{
       justify-content: space-evenly;
   }
   .space-around{
       justify-content: space-around;
   }
   .space-between{
       justify-content: space-between;
   }
   .center{
       justify-content: center;
   }
   .start{
       justify-content: start;
   }
   .end{
       justify-content: end;
   }

                $(document).ready(function () {
                    // default hide all radio conteny
                    $(".content .radio_content").hide();
                    $(".content .radio_content:first-child").show();

                    $(".radio_wrap").click(function () {
                        var currrent_radio = $(this).attr("data-radio");
                        $(".content .radio_content").hide();
                        $("." + currrent_radio).show();
                    });
                });