html 实现格子效果图,纯CSS实现动态图片的九宫格布局

起因

最近碰到这样一个需求，要实现一个“九宫格图片”展示，设计师给过来的稿子是酱的

是的，九宫格对应的是九种样式。

天不怕，地不怕，就怕设计有想法。

当一看到这样的需求，很多人的第一反应应该是会JS一把梭，通过一系列的判断条件来修改图片宽高或者更改DOM元素的class。的确，这么复杂的样式难免让人望而却步，这个需求通过JS是可以完成的【PS：废话，JS啥干不了】，但是如果只是分享JS如何实现的话，未免太小儿科了。

纯CSS实现

作为一个极客，当然一开始是想用纯CSS实现的，相信很多前端对JS非常熟悉甚至精通，但对CSS敢说精通的肯定是少之又少，其中一个原因在于很多人碰到类似这样的复杂样式设计的时候想的都是通过JS修改，所以很多人对CSS的掌握程度还不够深入。其实CSS是非常强大的，有必要深入掌握和研究，在此笔者强烈安利《CSS揭秘》这本书，也正是因为这本书才让笔者对CSS有了更深的认识。

需求分析

写代码之前先来分析下这个需求：

宽高：