Separator Between grid columns

Question

how can i add separator between grid columns. I try adding border and it always broke the layout. Please have a look at the attached picture for clear understanding.

EDIT

have a look it here

http://burnfatweightlossblog.com/aiu/junaid/testhtml/

code

<div class="container_12">
  <div id="footer">
    <div class="alpha grid_3 dabox"> </div>
    <!-- Box 1-->
    <div class="grid_3 dabox"> </div>
    <!-- Box 2-->
    <div class="grid_3 dabox"> </div>
    <!-- Box 3-->
    <div class="omega grid_3 dabox"> </div>
    <!-- Box 4--> 
  </div>
  <!-- footer--> 
</div>

Answer 1

Adding border would add extra 1px , so it breaks the layout, instead of adding border to grid column, try adding a div inside of it and give border to it ...

Answer 2

as gtamil says it will add the width of the border to each column. So yuor options as I see them are: 1) do as he says 2) remove 1px from each column that has a 1px border 3) use background images rather than actual borders

Option 3 is normally my preference since usually I want the dividers to be equal height. I would have a background image on the wrapping container (not the column divs) which repeats vertically. If you want to use this method but not have the dividers equal height then you can add the same image to the columns instead.

Answer 3

I had a slight different case, what I wanted to add is border only at the place of grid gap center. *Thing that i wanted And only in one of the grid group

• My parent Grid Class

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  column-gap: 50px; /*I Required this have a space between two grid columns*/ 
}

• Border Class

.grid-item{
  border-right: 1px solid #000000;
  padding-right: 25px;
}

• Column-gap modifier

#divtoApply + .grid-container{
  column-gap: 25px;
}

• sample HTML code

<div>
   <div class="grid-container">
      <div>1 --> 1</div>
      <div>1 --> 2</div>
      <div>1 --> 3</div>
   </div>
   <div id="divtoApply" class="grid-container">
      <div class="grid-item">2 --> 1</div>
      <div class="grid-item">2 --> 2</div>
      <div>2 --> 3</div>
   </div>
</div>

Answer 4

place a wrapper div around your content inside the grid div

HTML:

<div class="grid_4">
    <div class="columnDivider">
        contents here
    </div>
</div>

CSS:

.columnDivider {
    border-right: 1px solid #DEDEDE;
    margin-right:-10px; /* size of gutter */
    padding-right:10px; /* size of gutter */
}