pinterest like grid layout

Pinterest like layout with css




Recently i found my new love yes my new love it was Pinterest i am in love with it’s UI. Salute to the UI Designer. So i decided to try the layout on my own and this is the end product. In this tutorial, we are going to make pinterest like layout, a pinterest like grid layout is not difficult to create, we can create a pinterest like layout with css..so lets get started.



Pinterest like layout

Html

as always, nothing special in html. We have a main container containing all the tags #wrapper and inside wrapper we have another container #container, Inside container we will have .col which will have images and text

<div id="wrapper">
		<div id="container">
			<div class="col">
				<img src="7.jpg" alt="pinterest like layout with css">
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim</p>
			</div>
			<!-- / col end -->
			<div class="col">
				<img src="2.jpg" alt="pinterest like layout with css">
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim</p>
			</div>
			<!-- / col end -->
			<div class="col">
				<img src="1.jpg" alt="pinterest like layout with css">
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim</p>
			</div>
			<!-- / col end -->
			<div class="col">
				<img src="3.jpg" alt="pinterest like layout with css">
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim</p>
			</div>
			<!-- / col end -->
			<div class="col">
				<img src="4.jpg" alt="pinterest like layout with css">
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim</p>
			</div>
			<!-- / col end -->
			<div class="col">
				<img src="5.jpg" alt="pinterest like layout with css">
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim</p>
			</div>
			<!-- / col end -->
			<div class="col">
				<img src="6.jpg" alt="pinterest like layout with css">
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim</p>
			</div>
			
			<div class="col">
				<img src="8.jpg" alt="pinterest like layout with css">
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim</p>
			</div>
			<!-- / col end -->	
			<div class="col">
				<img src="1.jpg" alt="pinterest like layout with css">
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim</p>
			</div>
			<!-- / col end -->
			<div class="col">
				<img src="2.jpg" alt="pinterest like layout with css">
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim</p>
			</div>
			<!-- / col end -->
			<div class="col">
				<img src="3.jpg" alt="pinterest like layout with css">
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim</p>
			</div>
			<!-- / col end -->
			<div class="col">
				<img src="4.jpg" alt="pinterest like layout with css">
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim</p>
			</div>
			<!-- / col end -->
			<div class="col">
				<img src="5.jpg" alt="pinterest like layout with css">
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim</p>
			</div>
			<!-- / col end -->
			<div class="col">
				<img src="6.jpg" alt="pinterest like layout with css">
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim</p>
			</div>
			
			<div class="col">
				<img src="8.jpg" alt="pinterest like layout with css">
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim</p>
			</div>
			<!-- / col end -->	
		</div>
	</div>

Css

Css is also really no rocket science. Firstly we initialize width of the #wrapper and make it center, now the important part #container , we use column-row to divide the page in 5 equal column. Next in .col we give its display:inline-block and column-break-inside:avoid, these things will prevent from scrambling…rest is kids stuff

body{
	background: #e9e9e9;
}
#wrapper{
	width: 90%;
	max-width: 1100px;
	margin: 0px auto;
}
#container{
	-webkit-column-count: 2;
	-webkit-column-gap:10px;
	-webkit-column-fill:auto;
	-moz-column-count: 2;
	-moz-column-gap:10px;
	-moz-colum-fill:auto;
	column-count: 2;
	column-gap:10px;
	column-fill:auto;
}
.col{
	display: inline-block;
	background: #fff;
	margin-bottom: 15px;
	border-radius: 10px;
	-webkit-column-break-inside: avoid;
	-moz-column-break-inside: avoid;
	column-break-inside: avoid;
	box-shadow: 0px 2px 3px #ccc;
}
.col:hover{
	opacity: 1;
	cursor: pointer;
	-webkit-transition:all 0.3s ease;
	-moz-transition:all 0.3s ease;
	transition:all 0.3s ease;
}
.col img{
	width: 100%;
	border-top-right-radius: 10px;
	border-top-left-radius: 10px;
}
.col p{
	font: 12px/18px sans-serif;
	padding: 5px;
}
@media (min-width: 480px){
	#container{
		-webkit-column-count: 2;
		-moz-column-count:2;
		column-count:2;
	}
}
@media (min-width: 768px){
	#container{
		-webkit-column-count: 4;
		-moz-column-count:4;
		column-count:4;
	}
}
@media (min-width: 1100px){
	#container{
		-webkit-column-count: 5;
		-moz-column-count:5;
		column-count:5;
	}
}

3 thoughts on “Pinterest like layout with css

Leave a Reply

Your email address will not be published. Required fields are marked *