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

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/


I needed a solution to the same problem and used Blake's first solution - thanks!

However, I decided to do it slightly differently... rather than add an extra element to the markup I used a CSS pseudo element.

.container:before {
    content: ' ';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border: 2px solid #eee;
}

http://jsfiddle.net/Avc2v/

Tags:

Css

Recent Posts