六边形网格布局

HTML

<ul id="hexGrid">  
      <li class="hex">  
         <a class="hexIn" href="#">  
            <img src="img/1.jpg" alt="" />  
            <h1>This is a title</h1>  
            <p>Some sample text about the article this hexagon leads to</p>  
         </a>      </li>      <li class="hex">  
         <a class="hexIn" href="#">  
            <img src="img/2.jpg" alt="" />  
            <h1>This is a title</h1>  
            <p>Some sample text about the article this hexagon leads to</p>  
         </a>      </li>      <li class="hex">  
         <a class="hexIn" href="#">  
            <img src="img/3.jpg" alt="" />  
            <h1>This is a title</h1>  
            <p>Some sample text about the article this hexagon leads to</p>  
         </a>      </li>      <li class="hex">  
         <a class="hexIn" href="#">  
            <img src="img/4.jpg" alt="" />  
            <h1>This is a title</h1>  
            <p>Some sample text about the article this hexagon leads to</p>  
         </a>      </li>      <li class="hex">  
         <a class="hexIn" href="#">  
            <img src="img/5.jpg" alt="" />  
            <h1>This is a title</h1>  
            <p>Some sample text about the article this hexagon leads to</p>  
         </a>      </li>      <li class="hex">  
         <a class="hexIn" href="#">  
            <img src="img/6.jpg" alt="" />  
            <h1>This is a title</h1>  
            <p>Some sample text about the article this hexagon leads to</p>  
         </a>      </li>      <li class="hex">  
         <a class="hexIn" href="#">  
            <img src="img/7.jpg" alt="" />  
            <h1>This is a title</h1>  
            <p>Some sample text about the article this hexagon leads to</p>  
         </a>      </li>      <li class="hex">  
         <a class="hexIn" href="#">  
            <img src="img/8.jpg" alt="" />  
            <h1>This is a title</h1>  
            <p>Some sample text about the article this hexagon leads to</p>  
         </a>      </li>      <li class="hex">  
         <a class="hexIn" href="#">  
            <img src="img/1.jpg" alt="" />  
            <h1>This is a title</h1>  
            <p>Some sample text about the article this hexagon leads to</p>  
         </a>      </li>      <li class="hex">  
         <a class="hexIn" href="#">  
            <img src="img/2.jpg" alt="" />  
            <h1>This is a title</h1>  
            <p>Some sample text about the article this hexagon leads to</p>  
         </a>      </li>      <li class="hex">  
         <a class="hexIn" href="#">  
            <img src="img/3.jpg" alt="" />  
            <h1>This is a title</h1>  
            <p>Some sample text about the article this hexagon leads to</p>  
         </a>      </li>      <li class="hex">  
         <a class="hexIn" href="#">  
            <img src="img/4.jpg" alt="" />  
            <h1>This is a title</h1>  
            <p>Some sample text about the article this hexagon leads to</p>  
         </a>      </li>      <li class="hex">  
         <a class="hexIn" href="#">  
            <img src="img/5.jpg" alt="" />  
            <h1>This is a title</h1>  
            <p>Some sample text about the article this hexagon leads to</p>  
         </a>      </li>      <li class="hex">  
         <a class="hexIn" href="#">  
            <img src="img/6.jpg" alt="" />  
            <h1>This is a title</h1>  
            <p>Some sample text about the article this hexagon leads to</p>  
         </a>      </li>      <li class="hex">  
         <a class="hexIn" href="#">  
            <img src="img/7.jpg" alt="" />  
            <h1>This is a title</h1>  
            <p>Some sample text about the article this hexagon leads to</p>  
         </a>      </li>      <li class="hex">  
         <a class="hexIn" href="#">  
            <img src="img/8.jpg" alt="" />  
            <h1>This is a title</h1>  
            <p>Some sample text about the article this hexagon leads to</p>  
         </a>      </li>      <li class="hex">  
         <a class="hexIn" href="#">  
            <img src="img/1.jpg" alt="" />  
            <h1>This is a title</h1>  
            <p>Some sample text about the article this hexagon leads to</p>  
         </a>      </li>      <li class="hex">  
         <a class="hexIn" href="#">  
            <img src="img/2.jpg" alt="" />  
            <h1>This is a title</h1>  
            <p>Some sample text about the article this hexagon leads to</p>  
         </a>      </li>      <li class="hex">  
         <a class="hexIn" href="#">  
            <img src="img/3.jpg" alt="" />  
            <h1>This is a title</h1>  
            <p>Some sample text about the article this hexagon leads to</p>  
         </a>      </li>      <li class="hex">  
         <a class="hexIn" href="#">  
            <img src="img/4.jpg" alt="" />  
            <h1>This is a title</h1>  
            <p>Some sample text about the article this hexagon leads to</p>  
         </a>      </li>      <li class="hex">  
         <a class="hexIn" href="#">  
            <img src="img/5.jpg" alt="" />  
            <h1>This is a title</h1>  
            <p>Some sample text about the article this hexagon leads to</p>  
         </a>      </li>      <li class="hex">  
         <a class="hexIn" href="#">  
            <img src="img/6.jpg" alt="" />  
            <h1>This is a title</h1>  
            <p>Some sample text about the article this hexagon leads to</p>  
         </a>      </li>      <li class="hex">  
         <a class="hexIn" href="#">  
            <img src="img/7.jpg" alt="" />  
            <h1>This is a title</h1>  
            <p>Some sample text about the article this hexagon leads to</p>  
         </a>      </li>      <li class="hex">  
         <a class="hexIn" href="#">  
            <img src="img/8.jpg" alt="" />  
            <h1>This is a title</h1>  
            <p>Some sample text about the article this hexagon leads to</p>  
         </a>      </li>      <li class="hex">  
         <a class="hexIn" href="#">  
            <img src="img/1.jpg" alt="" />  
            <h1>This is a title</h1>  
            <p>Some sample text about the article this hexagon leads to</p>  
         </a>      </li>      <li class="hex">  
         <a class="hexIn" href="#">  
            <img src="img/2.jpg" alt="" />  
            <h1>This is a title</h1>  
            <p>Some sample text about the article this hexagon leads to</p>  
         </a>      </li>      <li class="hex">  
         <a class="hexIn" href="#">  
            <img src="img/3.jpg" alt="" />  
            <h1>This is a title</h1>  
            <p>Some sample text about the article this hexagon leads to</p>  
         </a>      </li>      <li class="hex">  
         <a class="hexIn" href="#">  
            <img src="img/4.jpg" alt="" />  
            <h1>This is a title</h1>  
            <p>Some sample text about the article this hexagon leads to</p>  
         </a>      </li>      <li class="hex">  
         <a class="hexIn" href="#">  
            <img src="img/5.jpg" alt="" />  
            <h1>This is a title</h1>  
            <p>Some sample text about the article this hexagon leads to</p>  
         </a>      </li>      <li class="hex">  
         <a class="hexIn" href="#">  
            <img src="img/6.jpg" alt="" />  
            <h1>This is a title</h1>  
            <p>Some sample text about the article this hexagon leads to</p>  
         </a>      </li>      <li class="hex">  
         <a class="hexIn" href="#">  
            <img src="img/7.jpg" alt="" />  
            <h1>This is a title</h1>  
            <p>Some sample text about the article this hexagon leads to</p>  
         </a>      </li>      <li class="hex">  
         <a class="hexIn" href="#">  
            <img src="img/8.jpg" alt="" />  
            <h1>This is a title</h1>  
            <p>Some sample text about the article this hexagon leads to</p>  
         </a>      </li></ul>

CSS

#hexGrid {  
    overflow: hidden;  
    width: 90%;  
    margin: 0 auto;  
    padding:0.866% 0;  
    font-family: 'Raleway', sans-serif;  
    font-size: 15px;  
}  
#hexGrid:after {  
    content: "";  
    display: block;  
    clear: both;  
}  
.hex {  
    position: relative;  
    list-style-type: none;  
    float: left;  
    overflow: hidden;  
    visibility: hidden;  
    outline:1px solid transparent; /* fix for jagged edges in FF on hover transition */  
    -webkit-transform: rotate(-60deg) skewY(30deg) translatez(-1px);  
        -ms-transform: rotate(-60deg) skewY(30deg) translatez(-1px);  
            transform: rotate(-60deg) skewY(30deg) translatez(-1px);  
}  
.hex * {  
    position: absolute;  
    visibility: visible;  
    outline:1px solid transparent; /* fix for jagged edges in FF on hover transition */  
}  
.hexIn {  
    display:block;  
    width: 100%;  
    height: 100%;  
    text-align: center;  
    color: #fff;  
    overflow: hidden;  
    -webkit-transform: skewY(-30deg) rotate(60deg);  
        -ms-transform: skewY(-30deg) rotate(60deg);  
            transform: skewY(-30deg) rotate(60deg);  
}  
  
/*** HEX CONTENT **********************************************************************/  
.hex img {  
    left: -100%;  
    right: -100%;  
    width: auto;  
    height: 100%;  
    margin: 0 auto;  
}  
  
.hex h1, .hex p {  
    width: 102%;  
    left:-1%; /* prevent line on the right where background doesn't cover image */  
    padding: 5%;  
    box-sizing:border-box;  
    background-color: rgba(0, 128, 128, 0.8);  
    font-weight: 300;  
    -webkit-transition:  -webkit-transform .2s ease-out, opacity .3s ease-out;  
            transition:          transform .2s ease-out, opacity .3s ease-out;  
}  
.hex h1 {  
    bottom: 50%;  
    padding-top:50%;  
    font-size: 1.5em;  
    z-index: 1;  
    -webkit-transform:translateY(-100%) translatez(-1px);  
        -ms-transform:translateY(-100%) translatez(-1px);  
            transform:translateY(-100%) translatez(-1px);  
}  
.hex h1:after {  
    content: '';  
    position: absolute;  
    bottom: 0;  
    left: 45%;  
    width: 10%;  
    text-align: center;  
    border-bottom: 1px solid #fff;  
}  
.hex p {  
    top: 50%;  
    padding-bottom:50%;  
    -webkit-transform:translateY(100%) translatez(-1px);  
        -ms-transform:translateY(100%) translatez(-1px);  
            transform:translateY(100%) translatez(-1px);  
}  
  
  
/*** HOVER EFFECT  **********************************************************************/  
.hexIn:hover h1, .hexIn:focus h1,  
.hexIn:hover p, .hexIn:focus p{  
    -webkit-transform:translateY(0%) translatez(-1px);  
        -ms-transform:translateY(0%) translatez(-1px);  
            transform:translateY(0%) translatez(-1px);  
}  
  
/*** SPACING AND SIZING *****************************************************************/  
@media (min-width:1201px) { /* <- 5-4  hexagons per row */  
    .hex {  
        width: 19.2%; /* = (100-4) / 5 */  
        padding-bottom: 22.170%; /* =  width / sin(60deg) */  
    }  
    .hex:nth-child(9n+6),  
    .hex:nth-child(9n+7),  
    .hex:nth-child(9n+8),  
    .hex:nth-child(9n+9) {  
        margin-top: -4.676%;  
        margin-bottom: -4.676%;  
        -webkit-transform: translateX(50%) rotate(-60deg) skewY(30deg);  
            -ms-transform: translateX(50%) rotate(-60deg) skewY(30deg);  
                transform: translateX(50%) rotate(-60deg) skewY(30deg);  
    }  
    .hex:nth-child(9n+6):last-child,  
    .hex:nth-child(9n+7):last-child,  
    .hex:nth-child(9n+8):last-child,  
    .hex:nth-child(9n+9):last-child {  
        margin-bottom: 0;  
    }  
    .hex:nth-child(9n+6) {  
        margin-left: 0.5%;  
        clear: left;  
    }  
    .hex:nth-child(9n+10) {  
        clear: left;  
    }  
    .hex:nth-child(9n+2),  
    .hex:nth-child(9n+ 7) {  
        margin-left: 1%;  
        margin-right: 1%;  
    }  
    .hex:nth-child(9n+3),  
    .hex:nth-child(9n+4),  
    .hex:nth-child(9n+8) {  
        margin-right: 1%;  
    }  
}  
@media (max-width: 1200px) and (min-width:901px) {/* <- 4-3  hexagons per row */  
    .hex {  
        width: 24.25%; /* = (100-3) / 4 */  
        padding-bottom: 28.001%; /* =  width / sin(60deg) */  
    }  
    .hex:nth-child(7n+5),  
    .hex:nth-child(7n+6),  
    .hex:nth-child(7n+7) {  
        margin-top: -6.134%;  
        margin-bottom: -6.134%;  
        -webkit-transform: translateX(50%) rotate(-60deg) skewY(30deg);  
            -ms-transform: translateX(50%) rotate(-60deg) skewY(30deg);  
                transform: translateX(50%) rotate(-60deg) skewY(30deg);  
    }  
    .hex:nth-child(7n+5):last-child,  
    .hex:nth-child(7n+6):last-child,  
    .hex:nth-child(7n+7):last-child {  
        margin-bottom: 0;  
    }  
    .hex:nth-child(7n+2),  
    .hex:nth-child(7n+6) {  
        margin-left: 1%;  
        margin-right: 1%;  
    }  
    .hex:nth-child(7n+3) {  
        margin-right: 1%;  
    }  
    .hex:nth-child(7n+8) {  
        clear: left;  
    }  
    .hex:nth-child(7n+5) {  
        clear: left;  
        margin-left: 0.5%;  
    }  
}  
@media (max-width: 900px) and (min-width:601px) { /* <- 3-2  hexagons per row */  
    .hex {  
        width: 32.666%; /* = (100-2) / 3 */  
        padding-bottom: 37.720%; /* =  width / sin(60) */  
    }  
    .hex:nth-child(5n+4),  
    .hex:nth-child(5n+5) {  
        margin-top: -8.564%;  
        margin-bottom: -8.564%;  
        -webkit-transform: translateX(50%) rotate(-60deg) skewY(30deg);  
            -ms-transform: translateX(50%) rotate(-60deg) skewY(30deg);  
                transform: translateX(50%) rotate(-60deg) skewY(30deg);  
    }  
    .hex:nth-child(5n+4):last-child,  
    .hex:nth-child(5n+5):last-child {  
        margin-bottom: 0;  
    }  
    .hex:nth-child(5n+4) {  
        margin-right: 1%;  
        margin-left: 0.5%;  
    }  
    .hex:nth-child(5n+2) {  
        margin-left: 1%;  
        margin-right: 1%;  
    }  
    .hex:nth-child(5n+6) {  
        clear: left;  
    }  
}  
@media (max-width: 600px) { /* <- 2-1  hexagons per row */  
    .hex {  
        width: 49.5%; /* = (100-1) / 2 */  
        padding-bottom: 57.158%; /* =  width / sin(60) */  
    }  
    .hex:nth-child(3n+3) {  
        margin-top: -13.423%;  
        margin-bottom: -13.423%;  
        -webkit-transform: translateX(50%) rotate(-60deg) skewY(30deg);  
            -ms-transform: translateX(50%) rotate(-60deg) skewY(30deg);  
                transform: translateX(50%) rotate(-60deg) skewY(30deg);  
    }  
    .hex:nth-child(3n+3):last-child {  
        margin-bottom: 0;  
    }  
    .hex:nth-child(3n+3) {  
        margin-left: 0.5%;  
    }  
    .hex:nth-child(3n+2) {  
        margin-left: 1%;  
    }  
    .hex:nth-child(3n+4) {  
        clear: left;  
    }  
}  
@media (max-width: 400px) {  
    #hexGrid {  
        font-size: 13px;  
    }  
}