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.

enter image description here

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>

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.. — rmagnum2002, Oct 11 '11 at 06:11
Answered here http://stackoverflow.com/questions/8802074/how-to-add-a-vertical-line-between-two-960-gs-boxes — nikmauro, Apr 11 '14 at 11:12

score 5 · Answer 1 · answered Jun 22 '12 at 01:57

5

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

answered Jun 22 '12 at 01:57

Robert

827
9
16

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). – Mark Oct 19 '12 at 14:13

score 2 · Accepted Answer · answered Oct 11 '11 at 06:03

2

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

answered Oct 11 '11 at 06:03

gtamil

532
5
10

let me try this, let;s hope this one fix it :D – Rao Oct 11 '11 at 07:56

score 0 · Answer 3 · answered Jul 13 '21 at 18:42

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>

score 0 · Answer 4 · answered Oct 11 '11 at 07:32

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.

for now i added the backgorund image and send for review, but i really want it to be with css, thanks for detailed reply — Rao, Oct 11 '11 at 07:57

Separator Between grid columns

4 Answers4