Front Page of Port LBC

front-page.php

<?php
/**
 * Template: Front Page
 *
 * @package port
 */

get_header(); ?>
		
		<div class="wrapper">
			<div class="col col-1-5">
				<div class="module" id="img-1">
					<img src="<?php the_field( 'image_1' ); ?>" />
				</div>
			</div>
			<div class="col col-1-5">
				<div class="module" id="img-2">
					<img src="<?php the_field( 'image_2' ); ?>" />
				</div>
			</div>
			<div class="col col-1-5">
				<div class="module" id="img-3">
					<img src="<?php the_field( 'image_3' ); ?>" />
				</div>
			</div>
			<div class="col col-1-5">
				<div class="module" id="img-4">
					<img src="<?php the_field( 'image_4' ); ?>" />
				</div>
			</div>
			<div class="col col-1-5">
				<div class="module" id="img-5">
					<img src="<?php the_field( 'image_5' ); ?>" />
				</div>
			</div>
			<div class="col col-1-5">
				<div class="module" id="img-6">
					<img src="<?php the_field( 'image_6' ); ?>" />
				</div>
			</div>
			<div class="col col-3-5">
				<div class="module" id="img-7">
					<img src="<?php the_field( 'image_7' ); ?>" />
				</div>
			</div>
			<div class="col col-1-3">
				<div class="module" id="img-8">
					<img src="<?php the_field( 'image_8' ); ?>" />
				</div>
			</div>
			<div class="col col-2-3">
				<div class="module" id="img-9">
					<img src="<?php the_field( 'image_9' ); ?>" />
				</div>
			</div>
			<div class="col col-1-3">
				<div class="module" id="img-10">
					<img src="<?php the_field( 'image_10' ); ?>" />
				</div>
				<div class="module" id="img-11">
					<img src="<?php the_field( 'image_11' ); ?>" />
				</div>
			</div>
			<div class="col col-1-3">
				<div class="module" id="img-12">
					<img src="<?php the_field( 'image_12' ); ?>" />
				</div>
			</div>
			<div class="col col-1-3">
				<div class="module" id="img-13">
					<img src="<?php the_field( 'image_13' ); ?>" />
				</div>
			</div>
			<div class="col col-3-5">
				<div class="module" id="img-14">
					<img src="<?php the_field( 'image_14' ); ?>" />
				</div>
				<div class="col">
					<div class="module" id="img-16">
						<img src="<?php the_field( 'image_16' ); ?>" />
					</div>
					<div class="module" id="img-17">
						<img src="<?php the_field( 'image_17' ); ?>" />
					</div>
				</div>
				<div class="col">
					<div class="module" id="img-18">
						<img src="<?php the_field( 'image_18' ); ?>" />
					</div>
				</div>
			</div>
			<div class="col col-2-5">
				<div class="module" id="img-15">
					<img src="<?php the_field( 'image_15' ); ?>" />
				</div>
			</div>
			<div class="col col-2-5">
				<div class="module" id="img-19">
					<img src="<?php the_field( 'image_19' ); ?>" />
				</div>
			</div>
		</div><!--.wrapper -->

<?php get_footer(); ?>

style.css

.wrapper {
	width: 1000px;
	margin:5% auto 0;
}
.grid {
	overflow: hidden;
}
	.col{
		float: left;
	}
	.col-1-5 {
		width: 20%;
	}
	.col-1-3 {
		width: 33.3333%;
	}
	.col-2-5 {
		width: 40%;
	}
	.col-2-3 {
		width: 66.6666%;
	}
	.col-3-5 {
		width: 60%;
	}

.module img {
	width: 100%;
	height: 100%;
	padding: 3px;
}
#img-1 {
	height: 440px;
	width: 200px;
}
#img-2,
#img-3,
#img-4,
#img-5 {
	height: 240px;
	width: 200px;
}
#img-6 {
	height: 200px;
	width: 200px;
}
#img-7 {
	height: 200px;
	width: 600px;
}
#img-8 {
	height: 395px;
	width: 333.33px;
}
#img-9 {
	height: 395px;
	width: 666.67px;
}
#img-10 {
	height: 194px;
	width: 333.33px;
}
#img-11 {
	height: 194px;
	width: 333.33px;
}
#img-12,
#img-13 {
	height: 388px;
	width: 333.33px;
}
#img-14 {
	height: 200px;
	width: 600px;
}
#img-15,
#img-18 {
	height: 400px;
	width: 400px;
}
#img-16,
#img-17 {
	height: 200px;
	width: 200px;
}
#img-19 {
	height: 200px;
	width: 400px;
}