A grid of boxes with no outer border, but with all inner borders

Question

The effect I'm going for:

I'm using a foreach loop to display the divs in this container element. The quick-and-dirty would be to do index % 4 (or whatever the number-of-divs-per-row is) and style accordingly, but I'm looking for a css-only approach if there is one.

One thing I'm playing with now is applying a white border to the container element that has negative margins, to cover up the borders of the outer divs... what other alternatives are there?

EDIT: I'm trying the "White border around container" method but it's not working because I'm floating the divs left (for responsive-ness) - so as soon as the white border of the container element overlaps the black border of the div, the div gets pushed to the next line.

Answer 1

I've got two answers for you to consider... The first one is pure css like you requested, and the second utilizes a small amount of php along with css. Typically, pure css solutions are desirable, but depending on the situation, the second solution could have some benefits as well.

So, first of all, the css. You were definitely on the right track with the outer border covering the borders of the divs. I adapted your approach a little bit though. Rather than putting that border on the parent element, I created an extra child (a span in this case) and positioned it absolutely within the parent, to span the full width and height. I put the border on this, instead of the parent, and since it is absolutely positioned, it doesn't interfere with the positioning of the other elements.

Also, box-sizing: border-box; could come in handy if you are having troubles with borders breaking the layout. I utilized that in my examples.

Here's the demonstration for that approach:

http://jsfiddle.net/PGygr/

---

As for the second solution, I used some more advanced selectors to override certain borders on certain boxes. That way, they aren't just hidden.. they're actually not there. For that reason, I would prefer to use this solution over the first, but that's just my opinion.

First, i put a border right and border bottom on all of the divs. This will be correct for all of the divs except for the last of each row, and all of the ones in the bottom row.

To select the last div in each row to cancel out it's right side border, I can do something like this:

.container div:nth-child(Xn) {
    border-right: none;
}

Where the 'X' would be replaced with the number of divs in each row. If I do this with embedded styles, I can use php to dynamically put that number there.

To select and deactivate the bottom borders for the last row, I can do something like this:

.container div:nth-child(X) ~ div {
    border-bottom: none;
}

Again, the 'X' would be placed in with php, and would be equal to the number of divs in each row, multiplied by the number of rows, minus one. So basically, select all of the divs that come after the last div in the second last row.

Here's the fiddle to demonstrate, minus the php aspect of it (I've manually entered the numbers into the css)

http://jsfiddle.net/t7atH/

Whether you decide to stick with the css only approach, or try adding in a little php, I hope this helps you. Best of luck!

UPDATE: as an afterthought, there is a third solution that I should probably add in. If you are able to add in row elements wrapping around the divs, you can utilize :first-child and :last-child to disable your borders.

It's fairly self-explanatory I think, so just take a look at the code:

http://jsfiddle.net/PGygr/3/

Answer 2

Here is a very simple solution using css grids - but it only works if there is no empty cell in your grid.

.container {
display: grid;
grid-gap: 2px;  /* the length of inner borders */
background-color: black;  /* the color of the inner borders */
}
.cell {
background-color: white;
}

The idea is to fill the container with a background color. Each cell will re-ink with its own background color, only leaving the gap visible.

http://jsfiddle.net/mq8Ldpbt/