グリッドレイアウト練習

HTML

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>おかず</title>
<link rel="stylesheet" href="css/base.css" type="text/css">
<!-- [if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<! [endif]-->
</head>
<body>
<section id="container">
<section class="group1">
<header>
<h1><a href="index.html"><img src="img/common/logo01.png"></a></h1>
<nav id="navGlobal">
<ul>
    <li><a href="#"><img  src="img/nav/nav01_01.png" /></a></li>
    <li><a href="#"><img  src="img/nav/nav02_01.png" /></a></li>
    <li><a href="#"><img  src="img/nav/nav03_01.png" /></a></li>
    <li><a href="#"><img  src="img/nav/nav04_01.png" /></a></li>
</ul>
</nav>
</header>
<ul>
    <li><a href="#"><img class="section1" src="upload/ph26_l.jpg" /></a></li>
    <li><a href="#"><img class="section2" src="upload/ph36_mt.jpg" /></a></li>
    <li><a href="#"><img class="section2" src="upload/ph19_s.jpg" /></a></li>
    <li><a href="#"><img class="section2" src="upload/ph37_s.jpg" /></a></li>
    <li><a href="#"><img class="section3" src="upload/ph23_my.jpg" /></a></li>
    <li><a href="#"><img class="section3"src="upload/ph28_s.jpg" /></a></li>
    <li><a href="#"><img class="section3"src="upload/ph05_s.jpg" /></a></li>
</ul>
</section>
<section class="group2">
<ul>
    <li><a href="#"><img class="section4" src="upload/ph12_my.jpg" /></a></li>
    <li><a href="#"><img class="section4" src="upload/ph02_s.jpg" /></a></li>
    <li><a href="#"><img class="section4" src="upload/ph22_s.jpg" /></a></li>
    <li><a href="#"><img class="section5" src="upload/ph10_l.jpg" /></a></li>
    <li><a href="#"><img class="section6" src="upload/ph21_s.jpg" /></a></li>
    <li><a href="#"><img class="section6" src="upload/ph03_s.jpg" /></a></li>
    <li><a href="#"><img class="section6a" src="upload/ph07_mt.jpg" /></a></li>
    <li><a href="#"><img class="section7" src="upload/ph09_l.jpg" /></a></li>
    <li><a href="#"><img class="section8" src="upload/ph13_s.jpg" /></a></li>
    <li><a href="#"><img class="section8" src="upload/ph27_s.jpg" /></a></li>
    <li><a href="#"><img class="section8" src="upload/ph24_my.jpg" /></a></li>
</ul>
</section>
<section class="group3">
<ul>
    <li><a href="#"><img class="section9" src="upload/ph11_l.jpg" /></a></li>
    <li><a href="#"><img class="section10" src="upload/ph18_s.jpg" /></a></li>
    <li><a href="#"><img class="section10" src="upload/ph17_s.jpg" /></a></li>
    <li><a href="#"><img class="section10a" src="upload/ph01_mt.jpg" /></a></li>
    <li><a href="#"><img class="section11" src="upload/ph06_s.jpg" /></a></li>
    <li><a href="#"><img class="section11" src="upload/ph20_s.jpg" /></a></li>
    <li><a href="#"><img class="section11" src="upload/ph15_my.jpg" /></a></li>
    <li><a href="#"><img class="section12" src="upload/ph25_s.jpg" /></a></li>
    <li><a href="#"><img class="section12" src="upload/ph08_s.jpg" /></a></li>
    <li><a href="#"><img class="section12" src="upload/ph16_s.jpg" /></a></li>
    <li><a href="#"><img class="section12" src="upload/ph04_s.jpg" /></a></li>
    <li><a href="#"><img class="section13" src="upload/ph14_l.jpg" /></a></li>
</ul>
</section>
</section>
</body>
</html>

CSS

@charset "UTF-8";
* {
	margin:0;
	padding:0;
}
ul {
	list-style-type:none;
}
section#container {
	width:1000px;
	height:auto;
	margin:30px auto;
	background-color:#fff;
}
header h1 {
	margin:0 0 17px 0;
}
nav#navGlobal {
	width:320px;
}
nav#navGlobal li {
	float:left;
	margin:0 20px 18px 0;
}
section.group1 {
	float:left;
	width:320px;
}
li img.section1 {
	float:left;
	margin:0 0 20px 0;
}
li img.section2 {
	float:left;
	margin:0 20px 20px 0;
}
li img.section3 {
	float:left;
	margin:0 20px 20px 0;
}
section.group2 {
	float:left;
	width:320px;
}
li img.section4 {
	float:left;
	margin:0 20px 21px 0;
}
li img.section5 {
	float:left;
	margin:0 20px 20px 0;
}
li img.section6 {
	float:left;
	margin:0 20px 20px 0;
	clear:both;
}
li img.section7 {
	float:left;
	margin:0 20px 20px 0;
}
li img.section8 {
	float:left;
	margin:0 20px 20px 0;
}
section.group3 {
	float:left;
	width:320px;
	margin:0 0px 0 0;
}
li img.section9 {
	float:left;
	margin:0 20px 21px 0;
}
li img.section10 {
	float:left;
	margin:0 20px 20px 0;
	clear:both;
}
li img.section10a {
	margin:0 0 17px 0;
}
li img.section11 {
	float:right;
	margin:0 20px 20px 0;
}
li img.section12 {
	float:left;
	margin:0 20px 20px 0;
}
li img.section13 {
	float:left;
	margin:0 20px 20px 0;
}