CODEWITHSUNDEEP
cssgridgutter
corysimmons
corysimmons

Reputation: 7675

Grid gutters are too wide for viewport and causing line break

This is a really convoluted example but say I've got 100 divs and they have a margin-right of 1px... they will break to the next line because of the width of the elements alone takes up the full width of the viewport.

Now, I understand that, but what about when the problem is being caused by fixed width gutters?

I suppose my question is, is it possible to have gutters collapse in on themselves (and their column) without breaking the grid down to the next line?

Here's an example of what I'd like to fix: http://codepen.io/corysimmons/pen/PZOPMm?editors=110

Upvotes: 0

Views: 196

Answers (3)

Stickers
Stickers

Reputation: 78676

When the container doesn't have enough space to hold the floating children, they will break into next line, that is expect behavior.

You can set the container to white-space:nowrap, and set the children to display:inline-block if you need them to be always in one line.

According to the specification 8.3.1 Collapsing margins:

Horizontal margins never collapse.

.container {
  white-space: nowrap;
}
div {
  display: inline-block;
  margin-right: 60px;
  background: tomato;
}
<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
  <div>13</div>
  <div>14</div>
  <div>15</div>
  <div>16</div>
  <div>17</div>
  <div>18</div>
  <div>19</div>
  <div>20</div>
  <div>21</div>
  <div>22</div>
  <div>23</div>
  <div>24</div>
</div>

However, there a couple of workarounds you might be interested. The basic idea is to make a equally distribute grid system.

  1. The flexbox approach:

.container {
  display: flex;
  justify-content: space-around;
}
div {
  background: tomato;
}
<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
  <div>13</div>
  <div>14</div>
  <div>15</div>
  <div>16</div>
  <div>17</div>
  <div>18</div>
  <div>19</div>
  <div>20</div>
  <div>21</div>
  <div>22</div>
  <div>23</div>
  <div>24</div>
</div>

  1. The CSS table layout:

.container {
  display: table;
  width: 100%;
  table-layout: fixed;
}
div {
  display: table-cell;
  text-align: center;
  background: tomato;
}
<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
  <div>13</div>
  <div>14</div>
  <div>15</div>
  <div>16</div>
  <div>17</div>
  <div>18</div>
  <div>19</div>
  <div>20</div>
  <div>21</div>
  <div>22</div>
  <div>23</div>
  <div>24</div>
</div>

Upvotes: 1

anulaibar
anulaibar

Reputation: 310

Here's another option that may be helpful - using media queries to specify the gutter width at different device widths.

div {
  float: left;
  width: 4.16%;
  background: HotPink;
}
@media (min-width: 800px) {
  div {
    width: 3.16%;
    margin-right: 1%;
  }
}
@media (min-width: 1000px) {
  div {
    width: 2.16%;
    margin-right: 2%;
  }
}
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
<div>13</div>
<div>14</div>
<div>15</div>
<div>16</div>
<div>17</div>
<div>18</div>
<div>19</div>
<div>20</div>
<div>21</div>
<div>22</div>
<div>23</div>
<div>24</div>

Upvotes: 0

Talmid
Talmid

Reputation: 1391

Here is an example using display:flex layout (run 'full page' to resize):

#container {
  display: flex;
  justify-content: space-between;
}
#container > div {
  padding: 0 10px;
  background: tomato;
}
<div id="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
  <div>13</div>
  <div>14</div>
  <div>15</div>
  <div>16</div>
  <div>17</div>
  <div>18</div>
  <div>19</div>
  <div>20</div>
  <div>21</div>
  <div>22</div>
  <div>23</div>
  <div>24</div>
</div>

Upvotes: 2

Related Questions