css center

responsible center

by lemon kazi

HTML

<body>



  <section id="grid-container">
    <div class="grid-image" id="red"></div>
    <div class="grid-image" id="orange"></div>
    <div class="grid-image" id="yellow"></div>
    <div class="grid-image" id="green"></div>
    <div class="grid-image" id="blue"></div>
    <div class="grid-image" id="indigo"></div>
    <div class="grid-image" id="violet"></div>
  </section>



</body>

CSS

/*Color Settings - DO NOT TOUCH OR ADD CODE */

#red {
  background-color: red
}

#orange {
  background-color: orange
}

#yellow {
  background-color: yellow
}

#green {
  background-color: green
}

#blue {
  background-color: blue
}

#indigo {
  background-color: indigo
}

#violet {
  background-color: violet
}


/*End of Color Settings - DO NOT TOUCH OR ADD CODE */


/*Outer Container Settings */

#grid-container {
  width: 100%;
  text-align: center;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}


/*End of Outer Container Settings */

.grid-image {
  box-sizing: border-box;
  min-height: 200px;
  min-width: 200px;
  max-width: 200px;
}