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>

Rohn

have you tried padding? some' like this .col > { > padding-right:10px; > padding-left:50px; > } would be easier if we some code, a table or whatever it is.. – Imponderable

Answered here #8802574 – Aridatha

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 ...

Lura

let me try this, let;s hope this one fix it :D – Rohn

Answer 2

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 */
}

Henrik

This concept worked well for me, except for the css I had to remove the padding line...all I needed was the margin (the padding messed it up). – Aec

Answer 3

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.

Tumbling

for now i added the backgorund image and send for review, but i really want it to be with css, thanks for detailed reply – Rohn

Answer 4

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>

Appomattox