startv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource
via CSS Lint

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource
via JS Hint

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Want a Run Button?

If active, the preview will update automatically when you change code.

HTML

            
              <html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Flexbox Grid System</title>
  <link rel="stylesheet" href="css/fb-grid.css">
</head>
<body>
	
<div class="row">
	<div class="col col-span-1">1</div>
	<div class="col col-span-1">1</div>
	<div class="col col-span-1">1</div>
	<div class="col col-span-1">1</div>
	<div class="col col-span-1">1</div>
	<div class="col col-span-1">1</div>
	<div class="col col-span-1">1</div>
	<div class="col col-span-1">1</div>
	<div class="col col-span-1">1</div>
	<div class="col col-span-1">1</div>
	<div class="col col-span-1">1</div>
	<div class="col col-span-1">1</div>
</div>

<div class="row">
	<div class="col col-span-1">1</div>
	<div class="col col-span-2">2</div>
	<div class="col col-span-3">3</div>
	<div class="col col-span-4">4</div>
	<div class="col col-span-2">2</div>
</div>

<div class="row">
	<div class="col col-span-5">5
		<p>Sotto un cespo di rose scarlatte dai al rospo the caldo col latte.</p>
		<p>Sotto un cespo di rose paonazze tocca al rospo lavare le tazze.</p>
	</div>
	<div class="col col-span-3">3</div>
	<div class="col col-span-4">4</div>
</div>
	
<div class="row">
	<div class="col col-span-6">6
		<div class="row nested">
			<div class="col col-span-7">7</div>
			<div class="col col-span-2">2</div>
			<div class="col col-span-3">3</div>
		</div>
	</div>
	<div class="col col-span-6">6
		<div class="row nested wide-fit">
			<div class="col col-span-7">7</div>
			<div class="col col-span-2">2</div>
			<div class="col col-span-3">3</div>
		</div>
	</div>
</div>

<div class="row center">
	<div class="col col-span-6">6
		<div class="row nested wide-fit">
			<div class="col col-span-7">7</div>
			<div class="col col-span-2">2</div>
			<div class="col col-span-3">3</div>
		</div>
	</div>
</div>

<div class="row center">
	<div class="col col-span-3">3</div>
	<div class="col col-span-3">3</div>
</div>

<div class="row">
	<div class="col col-span-7">7</div>
	<div class="col col-span-2">2</div>
	<div class="col col-span-3">3</div>
</div>

<div class="row">
	<div class="col col-span-8">8</div>
	<div class="col col-span-1">1</div>
	<div class="col col-span-3">3</div>
</div>

<div class="row">
	<div class="col col-span-9">9</div>
	<div class="col col-span-1">1</div>
	<div class="col col-span-2">2</div>
</div>

<div class="row">
	<div class="col col-span-10">10</div>
	<div class="col col-span-1">1</div>
	<div class="col col-span-1">1</div>
</div>

<div class="row">
	<div class="col col-span-11">11</div>
	<div class="col col-span-1">1</div>
</div>

<div class="row">
	<div class="col col-span-12">12</div>
</div>

<div class="row center">
	<div class="col col-span-6">6</div>
</div>

<div class="row center">
	<div class="col col-span-3">3</div>
	<div class="col col-span-3">3</div>
</div>

<div class="row">
	<div class="col fixed-width">
		<p>Fixed width column</p>
	</div>
	<div class="col">
		<div class="row nested">
			<div class="col col-span-7">7</div>
			<div class="col col-span-2">2</div>
			<div class="col col-span-3">3</div>
		</div>
	</div>
</div>

<div class="row">
	<div class="col fixed-width">
		<p>Fixed width column</p>
	</div>
	<div class="col">
		<div class="row nested wide-fit">
			<div class="col col-span-7">7</div>
			<div class="col col-span-2">2</div>
			<div class="col col-span-3">3</div>
		</div>
	</div>
</div>
	
</body>
</html>
            
          
!

CSS

            
              .row {
  margin-top: 0.5rem;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.col {
  flex: 1 1 8%;
  margin: 0 0 0.5rem 0;
  padding: 0.5em 10px;
  box-sizing: border-box;
}

/* nested grids */
.row .row, .row.nested {
  flex: 1 1 auto;
  margin-top: -0.5em;
}

/* full width grids */
.row.wide-fit {
  margin-left: -10px;
  margin-right: -10px;
}

/* center grids */
.row.center {
  justify-content: center;
}

.center .col {
  flex-grow: 0;
  flex-shrink: 0;
}

/* columns widths */

.col-span-1 {
  flex-basis: 8.3333%;
}

.col-span-2 {
  flex-basis: 16.6666%; 
}

.col-span-3 {
  flex-basis: 25%;
}

.col-span-4 {
  flex-basis: 33.3333%;
}

.col-span-5 {
  flex-basis: 41.6666%;
}

.col-span-6 {
  flex-basis: 50%;
}

.col-span-7 {
  flex-basis: 58.3333%;
}

.col-span-8 {
  flex-basis: 66.6666%;
}

.col-span-9 {
  flex-basis: 75%;
}

.col-span-10 {
  flex-basis: 83.3333%;
}

.col-span-11 {
  flex-basis: 91.6666%;
}

.col-span-12 {
  flex-basis: 100%;
}

/* examples */

.fixed-width {
  flex: 0 0 500px;
  background-color: rgba(255,0,0,0.1) !important;
}

@media all and (max-width: 568px) {
  .col-span-1,
  .col-span-2,
  .col-span-3,
  .col-span-4,
  .col-span-5 {
    flex-basis: 50%;
  }

  .col-span-6,
  .col-span-7,
  .col-span-8,
  .col-span-9,
  .col-span-10,
  .col-span-11 {
    flex-basis: 100%;
  }

  .nested .col {
    flex-basis: 100%;
  }
  
}

/* eye candy */

body {
  font-family: sans-serif;
}

.row {
  background-color: #cccccc;
  background-color: rgba(0,0,0,0.1);
}
.col {
  background-color: #999999;
  background-color: rgba(0,0,0,0.2);
  background-clip: content-box;
  border: 1px solid rgba(0,0,0,0.1);
}
            
          
!

JS

            
              /*

I'm playing with flexbox to build a future proof fluid and responsive grid system.

Flexbox is AWESOME on this task because it do every single thing a grid user need:
- fluid columns with fluid gutters;
- fluid columns with fixed gutters;
- fixed columns with fluid gutters;
- fixed columns and fluid columns on the same row;
- nested grids with or without side gutters;
- centered columns;
- centered nested grids with or without side gutters;
- equal heights of columns on the same row;
- responsive layouts with media queries changing only the flex-basis property.

While building a solid system and a generator tool (I'm developing an inline-block grid generator tool) I'm playing here.

*/
            
          
!
999px
Loading ..................

Console