flex-grid

The simplest and smallest flex-box based responsive grid system in the world. Everything you need to get started and nothing you don't, in under 60 lines of CSS.

Get the codeView on Github

Setup

Wrap everything in a .container, then add .rows into which you'll place columns. Your container can be any width: this page's is up to 1200px on desktop and 90% on mobile.


Automatic Equal Width Columns

Create default columns with .col; they automatically and equally fill the width available. Use one or as many as you need.

1 of 1
1 of 3
2 of 3
3 of 3

<div class="row">
	<div class="col">
		1 of 1
	</div>
</div>

<div class="row">
	<div class="col">
		1 of 3
	</div>
	<div class="col">
		2 of 3
	</div>
	<div class="col">
		3 of 3
	</div>
</div>
		

12 Column Grid

Classes for an intuitive and responsive 12 column grid of whatever width your .container is. No sizes or confusing modifiers, all you need to remember is how many columns you want. Default responsive behavior is that columns become full width when the browser is under 700px, but of course you can change that.

.one-col
.two-col
.three-col
.four-col
.five-col
.six-col
.seven-col
.eight-col
.nine-col
.ten-col
.eleven-col
.twelve-col

<div class="row">
	<div class="one-col">
		.one-col
	</div>
</div>
<div class="row">
	<div class="two-col">
		.two-col
	</div>
</div>
<div class="row">
	<div class="three-col">
		.three-col
	</div>
</div>
<div class="row">
	<div class="four-col">
		.four-col
	</div>
</div>
<div class="row">
	<div class="five-col">
		.five-col
	</div>
</div>
<div class="row">
	<div class="six-col">
		.six-col
	</div>
</div>
<div class="row">
	<div class="seven-col">
		.seven-col
	</div>
</div>
<div class="row">
	<div class="eight-col">
		.eight-col
	</div>
</div>
<div class="row">
	<div class="nine-col">
		.nine-col
	</div>
</div>
<div class="row">
	<div class="ten-col">
		.ten-col
	</div>
</div>
<div class="row">
	<div class="eleven-col">
		.eleven-col
	</div>
</div>
<div class="row">
	<div class="twelve-col">
		.twelve-col
	</div>
</div>
		

Mixed Grid + Auto Columns

You better believe you can mix grid classes with auto width columns. Look at it just work.

.three-col
.col

<div class="row">
	<div class="three-col">
		.three-col
	</div>
	<div class="col">
		.col
	</div>
</div>
		

Vertical Alignment

Sometimes you want to vertically align items in a row to the start, center, or end of the box. Just add .align-items-start, .align-items-center, or .align-items-end to the row that contains the items.

.two-col
that's really quite tall
.col
.two-col
that's really quite tall
.col
.two-col
that's really quite tall
.col

<div style="height: 160px; background: rgba(0,0,0,0.02);" class="row align-items-start">
	<div class="two-col">
		.two-col
		<br>
		that's really quite tall
	</div>
	<div class="col">
		.col
	</div>
</div>

<div style="height: 160px; background: rgba(0,0,0,0.02);" class="row align-items-center">
	<div class="two-col">
		.two-col
		<br>
		that's really quite tall
	</div>
	<div class="col">
		.col
	</div>
</div>

<div style="height: 160px; background: rgba(0,0,0,0.02);" class="row align-items-end">
	<div class="two-col">
		.two-col
		<br>
		that's really quite tall
	</div>
	<div class="col">
		.col
	</div>
</div>
		

Horizontal Alignment

Of course horizontal alignment works the same way; just add .justify-content-start, .justify-content-center, or .justify-content-end to the row that contains the items.

.three-col
.three-col
.three-col

<div style="background: rgba(0,0,0,0.02);" class="row justify-content-start">
	<div class="three-col">
		.three-col
	</div>
</div>

<div style="background: rgba(0,0,0,0.02);" class="row justify-content-center">
	<div class="three-col">
		.three-col
	</div>
</div>

<div style="background: rgba(0,0,0,0.02);" class="row justify-content-end">
	<div class="three-col">
		.three-col
	</div>
</div>
		

flex-grid.css

Copy and paste this into your CSS file to start using it. Don't worry about installing modules or even think about opening Terminal. Just 59 lines of pure bliss.


/* Flex Grid by @joshpuckett */
.container,
.col,
.one-col,
.two-col,
.three-col,
.four-col,
.five-col,
.six-col,
.seven-col,
.eight-col,
.nine-col,
.ten-col,
.eleven-col,
.twelve-col {
	box-sizing: border-box;
	padding: 1rem;
	padding: 1rem;
	flex-basis: 100%;
}
.row {
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	margin-left: -1rem;
	margin-right: -1rem;
}
.col {
	flex: 1 1 0 !important;
}
.container {
	width: 90%;
	margin: 0 auto;
	box-sizing: border-box; 
}

/* Devices larger than 700px */
@media (min-width: 700px) {
	.one-col										{ flex-basis: 8.333% !important; }
	.two-col										{ flex-basis: 16.666% !important; }
	.three-col										{ flex-basis: 25% !important; }
	.four-col										{ flex-basis: 33.333% !important; }
	.five-col										{ flex-basis: 41.666% !important; }
	.six-col										{ flex-basis: 50% !important; }
	.seven-col										{ flex-basis: 58.333% !important; }
	.eight-col										{ flex-basis: 66.666% !important; }
	.nine-col										{ flex-basis: 75% !important; }
	.ten-col										{ flex-basis: 83.333% !important; }
	.eleven-col									{ flex-basis: 91.666% !important; }
	.twelve-col									{ flex-basis: 100% !important; }
}

/*Vertical & Horizontal Alignment*/
.align-items-start    						{ align-items: flex-start !important; }
.align-items-end      						{ align-items: flex-end !important; }
.align-items-center   						{ align-items: center !important; }
.justify-content-start   					{ justify-content: flex-start !important; }
.justify-content-end     					{ justify-content: flex-end !important; }
.justify-content-center  					{ justify-content: center !important; }
		

Why does this exist?

Because every other grid system is too complicated and over-abstracted, and isn't suitable for quickly getting started on a new project with the absolute minimum that you need. Created to make your life easier by @joshpuckett.