Flexbox Grid System w/Margin Gutters

Question

I would love to get thoughts on how to layout a flexbox grid system with margin gutters.

For example:

In my pen below I have a row with display:flex and I want it to wrap so I used flex-wrap:wrap. That all works fine, but when I set a width of 25% to all of the columns I have to set a max-width of a calc(25% - 25px).

https://codepen.io/Jesders88/pen/rwbVwP?editors=1100

What I would like is to be able to have a margin gutter and not have to use calc or max-widths if that is possible. I also don't want to use percentages so that I can have a set margin in px units above each column and to the left when there is a gutter value. So basically what I want is if I were to set a 25px gutter and the number of items on a row to 4 I want those to have 25px gutter in between them, but stretch the whole width of the row if that makes sense. Any questions just let me know and I would be happy to elaborate.

Solution 1

One quick and easy way might be to use an inner container and padding...

This would allow the 'gutters' to be formed by the padding inside of the columns, meaning each column can span the full 25% width that is desired. Then, the inner content container would end up being what you style to appear as the actual columns themselves.

So you would change all of your markup for the columns to this:

<div class="column">
    <div class="content"></div>
</div>

And your CSS to this:

* {
    box-sizing: border-box;
}
.column {
    flex-grow:1;
    flex-shrink:1;
    width:25%;
    padding-left:25px;
    padding-top:25px;
}
.content {
    background:#2848e6;
    height:200px;
}

Please note the addition of box-sizing: border-box; which will allow the padding to be a part of the 25% width, and not in addition to it.

For example: https://codepen.io/anon/pen/EXJVZy?editors=1100

Solution 2

One way would be to use multiple rows and flex-grow: 1 and don't use a right margin on the :last-child

html, body {
	height: 100%;
	background: #252525;
  margin: 0;
}

section {
}

.row {
	display: flex;
}

.column {
	flex: 1 0 0;
	margin-top: 25px;
	height: 200px;
	background: #2848e6;
}
.column:not(:last-child) {
	margin-right: 25px;
}

<section>
	<div class="row">
		<div class="column"></div>
		<div class="column"></div>
		<div class="column"></div>
		<div class="column"></div>
	</div>
	<div class="row">
		<div class="column"></div>
		<div class="column"></div>
		<div class="column"></div>
		<div class="column"></div>
	</div>
</section>

Or you can use margin-right: 15px on all but the :nth-child(4) and a flex-basis of calc(25% - 11.25px) (45px of margin / 4 boxes = 11.25) as the width.

html, body {
	height: 100%;
	background: #252525;
  margin: 0;
}

section {
}

.row {
	display: flex;
	flex-wrap: wrap;
}

.column {
	flex: 0 1 calc(25% - 11.25px);
	margin-top: 25px;
	height: 200px;
	background: #2848e6;
}

.column:not(:nth-child(4n)) {
	margin-right: 15px;
}

<section>
	<div class="row">
		<div class="column"></div>
		<div class="column"></div>
		<div class="column"></div>
		<div class="column"></div>
		<div class="column"></div>
		<div class="column"></div>
		<div class="column"></div>
		<div class="column"></div>
	</div>
</section>

You can do this very easily with display: grid; using grid-column-gap and fr units.

html, body {
	height: 100%;
	background: #252525;
  margin: 0;
}

section {
}

.row {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-column-gap: 25px;
	grid-row-gap: 25px;
}

.column {
	height: 200px;
	background: #2848e6;
}

<section>
	<div class="row">
		<div class="column"></div>
		<div class="column"></div>
		<div class="column"></div>
		<div class="column"></div>
		<div class="column"></div>
		<div class="column"></div>
		<div class="column"></div>
		<div class="column"></div>
	</div>
</section>