I implemented a masonry layout but the div classes are not centering in the middle of the screen. 4 classes across the screen centered left and right width have to be the same. Im trying to center it perfectly in the middle of the wrapper div tag. Thanks for helping. Check my website live : www.problemsofnewyork.com/test.php
index.php
<?php include_once('php/db.php'); ?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Welcome</title>
<link rel="stylesheet" href="css/test.css"/>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="http://desandro.github.io/masonry/jquery.masonry.min.js"></script>
</head>
<body>
<div id="wrapper">
<div class="grid">
<?php
$result = $db -> prepare ("SELECT * FROM news ORDER BY id DESC");
$result->execute();
while($row = $result->fetch(PDO::FETCH_ASSOC)){
$id = $row['id'];
$title = $row['title'];
$content = $row['content'];
$image = $row['image'];
$posted_by = $row['posted'];
echo "
<div class='grid-item'>
<img src='images/".$image."'/>
<b>".$title."</b>
<p>".$id.") ". $content ."</p>
<span>Posted by: <i>".$posted_by."</i></span>
</div>
";
}
?>
</div>
</div>
<script>
$('.grid').masonry({
itemSelector: '.grid-item'
});
var $container = $('.grid');
$container.imagesLoaded( function(){
$container.masonry({
itemSelector : '.grid-item'
});
});
</script>
</body>
</html>
and the css
* {
margin: 0;
padding: 0;
}
body {
background: #e9e9e9;
}
#wrapper {
width: 90%;
height: auto;
overflow: hidden;
margin: 0 auto
}
.grid {
width: 90%;
margin: 15px auto;
}
.grid-item {
width: 340px;
background: #fff;
float: left;
margin-right: 15px;
margin-bottom: 15px;
box-shadow: 0 1px 2px 0 rgba(0,0,0,0.22);
}
.grid-item b {
padding: 5px;
word-wrap: break-word;
}
.grid-item p {
padding: 5px;
font-size: 13px;
word-wrap: break-word;
}
.grid-item span {
float: right;
padding: 5px;
font-family: monospace;
}
.grid-item img {
width: 100%;
}
Never mind. Adding
isFitWidth: truedid the trick.This code :
to this :