방식 1

• CSS에 div 각각에 속성을 부여하는 방식

html

<section class="box-1 inline-grid">
  <div class=""></div>
  <div class=""></div>
  <div class=""></div>
  <div class=""></div>
  <div class=""></div>
  <div class=""></div>
  <div class=""></div>
</section>

css

/* 노멀라이즈 */
body, ul, li{
  margin : 0;
  padding : 0;
  list-style:none;
}
/* 라이브러리 */
.inline-grid{
  font-size : 0;
}
.inline-grid > * {
  display : inline-block;
  vertical-align : top;
  font-size : 1rem;
}
/* 커스텀 */
.box-1{
  border:10px solid black;
  height: 500px;
}
.box-1 > div{
  height : calc(100%/2); 
}
.box-1 > div:nth-child(1){
  width : calc(100%/6);  
  background-color:red;
}
.box-1 > div:nth-child(2){
  width : calc(100%/3);
  background-color:blue;
}
.box-1 > div:nth-child(3){
  width : calc(100%/3);
  background-color:gold;
}
.box-1 > div:nth-child(4){
  width : calc(100%/6);
  background-color:green;
}

방식 2

• css의 class로 너비를 지정하여 html에 부여하는 방식

html

<section class="box-1 inline-grid">
  <div class="width_1/6"></div>
  <div class="width_2/6"></div>
  <div class="width_2/6"></div>
  <div class="width_1/6"></div>
  <div class=""></div>
  <div class=""></div>
  <div class=""></div>
</section>

css

/* 노멀라이즈 */
body, ul, li{
  margin : 0;
  padding : 0;
  list-style:none;
}
/* 라이브러리 */
.inline-grid{
  font-size : 0;
}
.inline-grid > * {
  display : inline-block;
  vertical-align : top;
  font-size : 1rem;
}
/* 커스텀 */
.box-1{
  border:10px solid black;
  height: 500px;
}
.box-1 > div{
  height : calc(100%/2); 
}
.box-1 > div:nth-child(1){
  background-color:red;
}
.box-1 > div:nth-child(2){
  background-color:blue;
}
.box-1 > div:nth-child(3){
  background-color:gold;
}
.box-1 > div:nth-child(4){
  background-color:green;
}
.width_1\/6{
  width:calc(100%/6*1)
}
.width_2\/6{
  width:calc(100%/6*2)
}
.width_3\/6{
  width:calc(100%/6*3)
}
.width_4\/6{
  width:calc(100%/6*4)
}
.width_5\/6{
  width:calc(100%/6*5)
}
.width_6\/6{
  width:calc(100%/6*6)
}