新时代创意排版不全指南

依稀记得某年粤语高考作文的相关描述——“有时候，常识容易知行难，有时候常识必须被分解以产生新的。”人们的想象力和创造力很容易被常识的一致认知所削弱。CSS更新太快，只能不断督促自己继续学习，一直呆在舒适区，很容易跟不上节奏。当然，这句话可以适用于任何技术和任何行业，而不仅仅是CSS。回到本文的主题——新时代布局。利用现有的CSS技术，是否可以大胆跳出常规思维，不再局限于一个个矩形框，尝试更具有艺术感？就像下面这些。不拘一格的线条：CSSTricks官网文字在一定时期内沿着图片的边缘排列：不再横竖：还是怪异的网格：GTA5的封面是不是很有意思？不拘一格的布局可以吸引页面更多的关注度和流量，当然这也需要我对CSS的掌握足够好，才能在有限的属性中创造出更多不同的可能。网格布局说到新时代布局和创意布局，就不得不提到网格布局。CSSGrid布局的二维性使得我们对页面的控制能力比传统的浮动布局、定位布局、flex布局更强。使用Grid布局将页面切块这里，我们利用Grid布局的特点，将页面任意切为我们想要的不同块区域。这里有一些工具可以方便我们的Grid布局：QuickGridLayout-GridLayoutit[1]使用这个工具，你可以快速创建你想要的Grid布局，并得到相应的CSS，非常简单方便。这里我用工具把页面分成A、B、C、D、E、F6个区域：复制右边的HTML和CSS，快速得到这样的布局。我把代码复制到CodePen中，简单的添加了勾选背景颜色后，我们可以基于这个布局做任何事情：CodePenDemo--GridLayoutDemo[2]UseGridlayoutwithclip-pathtorealizeGTA5cover这里，我们可以使用grid布局用clip-path实现GTA5的封面，像这样：我们把一个4x4的Grid网格分成9个不同的部分：然后使用clip-path，根据封面图片的形状，对每个网格项进行二次裁剪：ok，最后把里面的色块换成具体的图片即可：CodePenDemo--GTA5poster(GridandClipPath)[3]这里当然有槽点，最后用了9张图，何必呢不是一开始就直接用图片吗？:)Grid是复杂布局过程中非常好的帮手。非常适合各种不规则网格块的布局。这里还有一个DEMO：作者是OliviaNg[4]，Demo的链接——CodePenDemo——CSSGrid:TrainTicket[5]WaterfalllayoutWaterfalllayoutWaterfalllayout在现代布局中也很常见，通常用于一些照片墙。像这样：之前，在没有JavaScript帮助的情况下，我们有过三种纯CSS方式实现伪瀑布流布局（注意这是伪瀑布流），分别是：使用CSS栏目实现瀑布流布局[6]使用CSSFlex实现瀑布流布局[7]使用CSSgrid实现瀑布流布局[8]可以点击demo看到使用以上三种方式实现瀑布流布局缺点很明显：对于flex和column布局，只有它可以实现垂直瀑布布局，第一列填充第二列，依此类推。对于Grid布局，缺点是不能自动适配不同高度，需要手动指定每个元素块。未来，标准将实现grid-template-rows:masonry基于Grid布局。使用这个标准，我们可以快速的使用Grid来实现横向瀑布布局。目前，您可以在Firefox中体验该功能。使用grid-template-rows:masonry实现水平排列的瀑布布局。grid-template-rows：masonry是firefox从Firefox87开始支持的一种基于grid布局快速创建瀑布布局的方法。并且firefox一直在将这个属性推入标准。从firefox87开始，在浏览器的URL输入栏输入about:config，开启layout.css.grid-template-masonry-value.enabled配置。能否使用--grid-template-rows:masonry[9]通常情况下，我们还是需要花费一定的功夫来实现瀑布式布局，即使是基于网格布局。以往通过网格布局，我们可以通过精细控制每个网格项来实现垂直瀑布流布局：1