Расположить блоки в одну строку

.colBlock { 
  display: inline-block; 
  /* Надо расположить в одну строку */ 
} 
 
.red { 
  width: 50px; 
  height: 50px; 
  background: red; 
} 
 
.blue { 
  width: 50px; 
  height: 50px; 
  background: blue; 
} 
 
.brown { 
  width: 50px; 
  height: 50px; 
  background: brown; 
} 
 
.orange { 
  width: 50px; 
  height: 50px; 
  background: orange; 
} 
 
.black { 
  width: 50px; 
  height: 50px; 
  background: black; 
} 
 
.grey { 
  width: 50px; 
  height: 50px; 
  background: grey; 
} 
 
.yellow { 
  width: 50px; 
  height: 50px; 
  background: yellow; 
} 
 
.white { 
  width: 50px; 
  height: 50px; 
  background: white; 
} 
 
.green { 
  width: 50px; 
  height: 50px; 
  background: green; 
} 
 
/* ----- */ 
 
.colBlock { 
    display: grid; 
    grid-template-columns: repeat(3,1fr); 
    grid-gap: 5px; 
} 
 
.colBlock div { 
    display: block; 
    width: 100%; 
    height: 50px; 
} 
 
.colBlock div::before { 
    content: attr(class); 
    display: block; 
    width: 100%; 
    height: 50px; 
    line-height: 50px; 
    text-align: center; 
    text-shadow: 0 0 1px #fff; 
}

<div id="bgColor"> 
  <div class="colBlock"> 
    <div class="red">red</div> 
    <div class="blue"></div> 
    <div class="brown"></div> 
    <div class="orange"></div> 
    <div class="black"></div> 
    <div class="grey"></div> 
    <div class="yellow"></div> 
    <div class="white"></div> 
    <div class="green"></div> 
  </div> 
  <hr /> 
  <button class="closeButton" id="bgColClose" onclick="closeCondWind()">Закрыть</button> 
</dialog>

* { 
  margin: 0; 
  padding: 0; 
  box-sizing: border-box; 
} 
 
html, 
body { 
  width: 100%; 
  height: 100%; 
  background: #272727; 
} 
 
#bgColor { 
  width: 100%; 
  height: 100px; 
} 
 
.colBlock { 
  width: 100%; 
  height: 100%; 
  display: flex; 
} 
 
.line { 
  width: 50px; 
  height: 50px; 
} 
 
.red { 
  background: red; 
} 
 
.blue { 
  background: blue; 
} 
 
.brown { 
  background: brown; 
} 
 
.orange { 
  background: orange; 
} 
 
.black { 
  background: black; 
} 
 
.grey { 
  background: grey; 
} 
 
.yellow { 
  background: yellow; 
} 
 
.white { 
  background: white; 
} 
 
.green { 
  background: green; 
}

<dialog id="bgColor" open> 
  <div class="colBlock"> 
    <div class="line red">red</div> 
    <div class="line blue">blue</div> 
    <div class="line brown">brown</div><br> 
    <div class="line orange">orange</div> 
    <div class="line black">black</div> 
    <div class="line grey">grey</div><br> 
    <div class="line yellow">yellow</div> 
    <div class="line white">white</div> 
    <div class="line green">green</div><br> 
  </div> 
  <hr /> 
  <button class="closeButton" id="bgColClose" onclick="document.querySelector('dialog').close()">Закрыть</button> 
</dialog>