colors

by jpeter06

HTML

<div class="container">
<div class="d1"> <input type="color" id="favcolor" name="favcolor" value="#666666"></div>
<div class="d2">
  <input type="color" id="favcolor" name="favcolor" value="#666666">
</div>
<div class="d3">  <input type="color" id="favcolor" name="favcolor" value="#666666"></div>
<div class="d4">  <input type="color" id="favcolor" name="favcolor" value="#666666"></div>
<div class="d5"> <input type="color" id="favcolor" name="favcolor" value="#666666"></div>
<div class="d6"> <input type="color" id="favcolor" name="favcolor" value="#666666"></div>
<div class="d7"> <input type="color" id="favcolor" name="favcolor" value="#666666"></div>
<div class="d8"> <input type="color" id="favcolor" name="favcolor" value="#666666"></div>
<div class="d9"> <input type="color" id="favcolor" name="favcolor" value="#666666"></div>
</div>

<div class="container">
<div class="d1"> <input type="color" id="favcolor" name="favcolor" value="#666666"></div>
<div class="d2">
  <input type="color" id="favcolor" name="favcolor" value="#666666">
</div>
<div class="d3">  <input type="color" id="favcolor" name="favcolor" value="#666666"></div>
<div class="d4">  <input type="color" id="favcolor" name="favcolor" value="#666666"></div>
<div class="d5"> <input type="color" id="favcolor" name="favcolor" value="#666666"></div>
<div class="d6"> <input type="color" id="favcolor" name="favcolor" value="#666666"></div>
<div class="d7"> <input type="color" id="favcolor" name="favcolor" value="#666666"></div>
<div class="d8"> <input type="color" id="favcolor" name="favcolor" value="#666666"></div>
<div class="d9"> <input type="color" id="favcolor" name="favcolor" value="#666666"></div>
</div>
<div class="container">
<div class="d1"> <input type="color" id="favcolor" name="favcolor" value="#666666"></div>
<div class="d2">
  <input type="color" id="favcolor" name="favcolor" value="#666666">
</div>
<div class="d3">  <input type="color" id="favcolor" name="favcolor" value="#666666"></div>
<div...

CSS

html,body{
  margin:0px;
  padding:0px;
  background:gray;
  width:100%;
  height:100%;
  overflow:hidden;
  display:flex;
}

body div{
  flex-grow:2;
}
input[type="color"]{
  width:100%;
  height:100%;
  border:0px solid red;
  box-sizing: border-box;
}
.container{
  display:flex;
  flex-direction:column;
  height:100%;
  width:50%;
}

.container div{
  border:2px solid white;
  flex-grow:2;
}

.d5{
  background:darkgrey;
}
.d1,.d2,.d3,.d4,.d6,.d7,
.d8,.d9{
  barckground:gray;
}