Pirate Grid

Tutorials of (Pirate grid) by Blackratio

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Pirate Grid</title>
  <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>


  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <div id="wrapper">
		<div id="section2" class="section">
			<h2>DEMO</h2>
			<h3>Avec marge</h3>
			<div class="wrapp_grid first">
				<div class="inner">
					<div class="bloc grid7">
						<div class="inner">
							7
						</div>
					</div>
				</div>
			</div>
			<div class="wrapp_grid">
				<div class="inner">
					<div class="bloc grid2">
						<div class="inner">
							2
						</div>
					</div>
					<div class="bloc grid2">
						<div class="inner">
							2
						</div>
					</div>
					<div class="bloc grid2">
						<div class="inner">
							2
						</div>
					</div>
					<div class="bloc grid2">
						<div class="inner">
							2
						</div>
					</div>
					<div class="bloc grid2">
						<div class="inner">
							2
						</div>
					</div>
				</div>
			</div>
			<div class="wrapp_grid">
				<div class="inner">
					<div class="bloc grid3">
						<div class="inner">
							3
						</div>
					</div>
					<div class="bloc grid3">
						<div class="inner">
							3
						</div>
					</div>
					<div class="bloc grid3">
						<div class="inner">
							3
						</div>
					</div>
					<div class="bloc grid3">
						<div class="inner">
							3
						</div>
					</div>
				</div>
			</div>
			<div class="wrapp_grid">
				<div class="inner">
					<div class="bloc grid4">
						<div class="inner">
							4
						</div>
					</div>
					<div class="bloc grid4">
						<div class="inner">
							4
						</div>
					</div>
					<div class="bloc grid4">
						<div class="inner">
							4
						</div>
					</div>
				</div>
			</div>
			<div class="wrapp_grid">
				<div class="inner">
					<div class="bloc grid5">
						<div class="inner">
							5
						</div>
					</div>
					<div class="bloc grid5">
						<div class="inner">
							5
						</div>
					</div>
				</div>
			</div>
			<div class="wrapp_grid">
				<div class="inner">
					<div class="bloc grid4">
						<div class="inner">
							4
						</div>
					</div>
					<div class="bloc grid6">
						<div class="inner">
							6
						</div>
					</div>
				</div>
			</div>
			<h3>Sans marge</h3>
			<div class="wrapp_grid noMarge first">
				<div class="inner">
					<div class="bloc grid7">
						<div class="inner">
							7
						</div>
					</div>
				</div>
			</div>
			<div class="wrapp_grid noMarge">
				<div class="inner">
					<div class="bloc grid2">
						<div class="inner">
							2
						</div>
					</div>
					<div class="bloc grid2">
						<div class="inner">
							2
						</div>
					</div>
					<div class="bloc grid2">
						<div class="inner">
							2
						</div>
					</div>
					<div class="bloc grid2">
						<div class="inner">
							2
						</div>
					</div>
					<div class="bloc grid2">
						<div class="inner">
							2
						</div>
					</div>
				</div>
			</div>
			<div class="wrapp_grid noMarge">
				<div class="inner">
					<div class="bloc grid3">
						<div class="inner">
							3
						</div>
					</div>
					<div class="bloc grid3">
						<div class="inner">
							3
						</div>
					</div>
					<div class="bloc grid3">
						<div class="inner">
							3
						</div>
					</div>
					<div class="bloc grid3">
						<div class="inner">
							3
						</div>
					</div>
				</div>
			</div>
			<div class="wrapp_grid noMarge">
				<div class="inner">
					<div class="bloc grid4">
						<div class="inner">
							4
						</div>
					</div>
					<div class="bloc grid4">
						<div class="inner">
							4
						</div>
					</div>
					<div class="bloc grid4">
						<div class="inner">
							4
						</div>
					</div>
				</div>
			</div>
			<div class="wrapp_grid noMarge">
				<div class="inner">
					<div class="bloc grid5">
						<div class="inner">
							5
						</div>
					</div>
					<div class="bloc grid5">
						<div class="inner">
							5
						</div>
					</div>
				</div>
			</div>
			<div class="wrapp_grid noMarge">
				<div class="inner">
					<div class="bloc grid4">
						<div class="inner">
							4
						</div>
					</div>
					<div class="bloc grid6">
						<div class="inner">
							6
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

    <script  src="js/index.js"></script>

</body>
</html>
/* Downloaded from https://www.codeseek.co/ */
/****************************************************************************
*****************************************************************************
		SIMPLE FLUID GRID SYSTEM
		Auteur : David Wieczorek
		Année: 2013
		Version: 2_3
		Mail: [email protected]
*****************************************************************************
****************************************************************************/


/**** STRUCTURE ****/

/* Général */
.wrapp_grid > .inner {
	overflow:hidden;
	padding:0 1%;
}
.bloc {
	float:left;
	display:inline;
	margin-left:2%;
}
.wrapp_grid { margin-bottom: 10px }
.wrapp_grid .bloc .inner { padding:10px }
.wrapp_grid .wrapp_grid { margin-top:-10px; }
.wrapp_grid .wrapp_grid:first-child { margin-top:0; }

/* Suppression des marges */
.noMarge > .inner { padding:0 !important; }

/* Supprime les marges gauche des premiers éléments de type bloc */
.grid1:first-child,
.grid2:first-child,
.grid3:first-child,
.grid4:first-child,
.grid5:first-child,
.grid6:first-child,
.grid7:first-child,
.grid8:first-child,
.grid9:first-child,
.grid10:first-child,
.grid11:first-child,
.grid12:first-child {
	margin-left:0
}


/**** GRIDS ****/
.grid1 { width:15%; }
.grid2 { width:18.4% }
.grid3 { width:23.5% }
.grid4 { width:32% }
.grid5 { width:49% }
.grid6 { width:66% }
.grid7 {
	width:100%;
	clear:both;
}


/***** PERSONNALISATION *****/
.section {
	overflow:hidden;
	padding: 30px 50px;
}
#section0 {
	
}
#section1 {
	background-color: #f9f9f9;
}
#section2 {
	background-color: #f5f5f5;
}
h1, h2, h3 {
	font-family: 'Josefin Sans', sans-serif;
	font-weight: lighter;
}
h1 {
	text-align: center;
	margin: 15px 0 30px 0;
	font-size: 30px;
	text-transform: uppercase;
	color: #bbb;
}

h1 span { color:red; }
h2 {
	text-transform: uppercase;
	font-size:25px;
	padding: 15px;
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #ddd; 
	color:#333;
	margin: 30px 0 15px 0;
}

h3 {
	font-size:20px;
	color:#555;
	margin:15px 0;
}

.paragraph .bloc { 
-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
background:none;
}
.paragraph .bloc .inner { padding:0 !important; }
.noMarge .bloc { 
	color: #fff;
	background:#333 !important; }

.bloc {
	border-radius: 10px;
	height: 60px;
	line-height: 40px;
	-webkit-transition: background .6s ease-in;
	-moz-transition: background .6s ease-in;
	-o-transition: background .6s ease-in;
	transition: background .6s ease-in;
	background:#ddd;
}
.wrapp_grid .wrapp_grid .bloc {
	-webkit-transition: background .6s ease-in;
	-moz-transition: background .6s ease-in;
	-o-transition: background .6s ease-in;
	transition: background .6s ease-in;
	background:#97fccb;
}
.normal {  }
.mqueries { display:none; }




/***** MEDIAS QUERIES / RESPONSIVE GRID *****/
@media screen and (max-width: 1024px) /*iPad Landscpae*/ {

}

@media screen and (max-width: 770px) /*iPad Portrait */ {
/* Perso */
.section {
	width: 98%;
	padding: 0 1%;
 }
.bloc {
	color:#333;
	background:#ccc;
}
.secteur > .wrapp_grid:first-child { margin-bottom: 0 }
.wrapp_grid .wrapp_grid .bloc { color:#aaa }
.wrapp_grid.first { margin-bottom: 0 }
.noMarge .bloc {  }

/* Mise en page */
.bloc {
	overflow:hidden;
	height: 150px;
	line-height: 130px;
	text-align: center;
	width:100% !important;
	margin-left:0;
	margin-bottom:10px;
}
.normal { display:none; }
.mqueries { display:block; }
.grid1:last-child,
.grid2:last-child,
.grid2_3:last-child,
.grid3:last-child,
.grid33:last-child,
.grid1_3:last-child,
.grid4:last-child,
.grid5:last-child,
.grid6:last-child { margin-bottom:0 }
}

@media screen and (max-width: 480px) /*iPhone Landscape */ {

}

@media screen and (max-width: 320px) /*iPhone Portrait */ {

}
/* Downloaded from https://www.codeseek.co/ */
$(document).ready(function(){
  $('.heightauto').each(function(){  
    var highestBox = 0;
    $('.bloc', this).each(function(){
      if($(this).height() > highestBox) 
        highestBox = $(this).height(); 
    });  
    $('.bloc',this).height(highestBox);
  });      
});

This awesome code ( Pirate Grid ) is write by blackratio, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © blackratio