A grid with spacing / gutters between items, but not between items and the container

Question

So I want to create a grid where the children are the individual grid squares.

However, I have spacing between the children and the parent, which I don't want. How do I remove that?

Negative margin on the parent moves the whole thing, which decenters it on the page.

The goal is to have the whole thing be responsive, which is why I use floating and relative widths.

The way I would like it to look is like this (10px spacing):

+-----+--+-----+--+-----+--+-----+
|xxxxx|  |xxxxx|  |xxxxx|  |xxxxx|
|xxxxx|  |xxxxx|  |xxxxx|  |xxxxx|
|xxxxx|  |xxxxx|  |xxxxx|  |xxxxx|
+-----+  +-----+  +-----+  +-----+
|                                |
+-----+  +-----+                 |
|xxxxx|  |xxxxx|                 |
|xxxxx|  |xxxxx|                 |
|xxxxx|  |xxxxx|                 |
+--------------------------------+

#parent {
  width: 500px;
  height: 500px;
  background-color: #CCCCCC;
}

.child {
  box-sizing: border-box;
  /* So the padding expands inwards */
  padding: 5px;
  /* Replacement to margin so relative width works, spacing between children ends out to be 10px of course */
  width: 25%;
  height: 100px;
  float: left;
}

.child>div {
  /* This represents content of the child */
  width: 100%;
  height: 100%;
  background-color: #000000;
}

<div id=parent>
  <div class=child>
    <div></div>
  </div>
  <div class=child>
    <div></div>
  </div>
  <div class=child>
    <div></div>
  </div>
  <div class=child>
    <div></div>
  </div>
  <div class=child>
    <div></div>
  </div>
  <div class=child>
    <div></div>
  </div>
</div>

I don't see what spacing you mean. If you give the children a green background you see that they're flush with the parent. — Björn Tantau, Aug 01 '17 at 16:24
Yes but then there's no spacing between the children if I use them directly. — krisser143, Aug 01 '17 at 16:27
You have spacing between the inner `div`s and the `.child` divs, but none between the `.child` and the `.parent`. You might need to add a clearer description of the problem. — DBS, Aug 01 '17 at 16:35

score 0 · Accepted Answer · answered Aug 01 '17 at 16:38

How about something like this:

.child { padding: 0 5px 5px 0;}
.child:nth-child(4n){ padding-right: 0;}

See working demo below:

#parent {
  width: 500px;
  height: 500px;
  background-color: #CCCCCC;
}

.child {
  box-sizing: border-box;
  width: 25%;
  height: 100px;
  float: left;
  padding: 0 5px 5px 0;
}

.child:nth-child(4n) {
  padding-right: 0;
}

.child>div {
  /* This represents content of the child */
  width: 100%;
  height: 100%;
  background-color: #000000;
}

<div id=parent>
    <div class=child><div></div></div>
    <div class=child><div></div></div>
    <div class=child><div></div></div>
    <div class=child><div></div></div>
    <div class=child><div></div></div>
    <div class=child><div></div></div>
    <div class=child><div></div></div>
    <div class=child><div></div></div>
    <div class=child><div></div></div>
    <div class=child><div></div></div>
</div>

It seems that this is the best way to do it. Thanks for the help ^^ — krisser143, Aug 01 '17 at 17:56

venuka maddukuri · Answer 2 · 2017-08-01T23:44:30.377

How about this:

    <div id=parent>
        <div class=child><div></div></div>
        <div class=child><div></div></div>
        <div class=child><div></div></div>
        <div class=child><div></div></div>
        <div class=child><div></div></div>
        <div class=child><div></div></div>
    </div>

    <style>
      #parent {
        width: 500px;
        height: 200px;
        background-color: #CCCCCC;
      }

      .child {
        box-sizing: border-box; /* So the padding expands inwards */
        width: 25%;
        height: 100px;
        float: left;
        padding:0px 5px 5px 0px;
      }
      .child:nth-child(4n) {
   
  padding-right: 0;
}
.child:nth-child(n+5) {
  padding:5px 5px 0px 0px;
}
      .child > div { /* This represents content of the child */
        width: 100%;
        height: 100%;
        background-color: #000000;
      }
    </style>

Michael Benjamin · Answer 3 · 2017-08-02T20:15:50.167

This is a problem that has been solved by CSS Grid Layout.

Grid provides grid-column-gap, grid-row-gap and grid-gap (the shorthand), which create space between grid items, but don't apply to the area between items and the container.

10.1. Gutters: the grid-column-gap, grid-row-gap, and grid-gap properties

These properties specify the gutters between grid rows and grid columns, respectively.

#parent {
  display: grid;
  grid-template-columns: repeat(auto-fill, 120px);
  grid-auto-rows: 120px;
  grid-gap: 10px;
  width: 510px;
  background-color: #cccccc;
}

.child {
  background-color: #000000;
}

<div id="parent">
  <div class=child></div>
  <div class=child></div>
  <div class=child></div>
  <div class=child></div>
  <div class=child></div>
  <div class=child></div>
</div>

For an explanation of how the other Grid properties above work, see this post: CSS-only masonry layout but with elements ordered horizontally

For CSS Grid browser support, see here: http://caniuse.com/#search=grid

I have seen the grid layout feature, but support for it is sparse. — krisser143, Aug 02 '17 at 20:05

A grid with spacing / gutters between items, but not between items and the container

3 Answers3

How about something like this:

See working demo below: