Want to style divs inside parent div using grid-CodePudding

I need to design a parent div in a way that divs appear like this:

<div >
  <div>1</div>
  <div>4</div>
  <div>2</div>
  <div>5</div>
  <div>3</div>
  <div>6</div>
</div>

Also the parent div must be divided into column style where 1, 2, 3 should come in order for left-side and 4,5,6 in the right side of wrapper div

CodePudding user response：

You can do it using grid like this:-

.parent {
    display: grid;
    grid-template-rows: repeat(3, 20px);
    grid-template-columns: repeat(2, 20px);
}

CodePudding user response：

You mean like this?

.parent {
  display:grid;
  grid-template-columns:auto auto auto;
  color:red;
  background-color:gray;
  }
 
.number {
  height:30px;
  border:1px solid white;
  text-align:center;
  border:1px solid black;
  }
  
.number:hover {
  background-color:#fff; 
 }

<div >
  <div >1</div>
  <div >2</div>
  <div >3</div>
  <div >4</div>
  <div >5</div>
  <div >6</div>
</div>

CodePudding user response：

Is the one you want?

.parent {
  column-count:2;
  color:red;
  column-gap:5px;
  
  }
 
.number {
  height:30px;
  border:1px solid white;
  text-align:center;
  border:1px solid black;
  }
  
.number:hover {
  background-color:#fff; 
 }

<div >
  <div >1</div>
  <div >2</div>
  <div >3</div>
  <div >4</div>
  <div >5</div>
  <div >6</div>
</div>