一直以来，在 Web 布局中都是以方方正正的矩形向用户展示 UI 效果，而且众多 Web 开发者的意识中也是如此，Web 的布局是无法打破矩形排列的限制！但 Web 技术的发展速度是惊人的，每天都有新的东西出现在我们的眼前。就在这短短的几年时间内，用于 Web 布局的新特特别的多。换句话说，如果今天设计师跟你说：“亲，整一个类似杂志或报刊类的布局吧”！你会爽快的说 OK! 即，使用现在的新特性可以打破矩形框的限制，让你在 Web 上实现像杂志一样的排版布局。

杂志报刊类布局可能会用到的布局特性

虽然我们今天要聊的主题是使用 CSS Grid 来构建杂志报刊类布局，但这并不代表着，实现这类的布局仅用 CSS Grid 特性就可以。简单地说吧，如果我们要实现上图展示的布局效果，CSS Grid 只是给了我们一些独有的优势，那是因为像 Flexbox 、浮动之类的布局只是一维布局，而 CSS Grid 却不同，他是唯一一个支持两维布局的技术，可以同时在水平和垂直方向控制元素盒子的位置。

不过，要让 Web 布局效果更类似于杂志报刊的设计、排版效果，可能还会用到其他一些 CSS 特性，比如：

• 多列布局，可以将同一元素里内容自动分成多栏
• CSS Regions 和 Exclusions，可以很好的解决文本围绕图片的效果，只是目前支持的浏览器非常的少
• CSS Shapes，可以让内容在任何不规则的容器中流动，也可以围绕着任意不规则的图形排列
• CSS Clipping 和 Masking，可以裁剪出不规则的图形或形状，也可以让元素按不规则形状展示
• CSS 书写模式和逻辑属性，可以让文本竖排，也可以按不同的书写（阅读）方式排列
• 首字下沉，是杂志报刊类常见的一种效果，可以使用 initial-letters 轻易的实现首字下沉的效果
• Web Fonts 和可变字体，可以让文本更具艺术效果，视觉更具冲击性

有关于这方面更详细的介绍，可以阅读《构建杂志布局可能会用到的CSS特性》一文。

今天的目标

我们今天的目标很明确，使用 CSS Grid 构建杂志报刊类布局，先从简单的开始，比如说实现下图的布局效果：

然后在进入稍微复杂一点的布局，如下图所示：

注意，实现上面的布局效果，CSS Grid 只是用于布局，其他的一些效果还是需要用到 CSS 的其他特性，比如多列布局，书写模式，首字下沉，Flexbox等。

目标一

目标一是 @JENSIMMONS 的 "实验室布局" 首页顶部的布局效果，相对来说是很简单的。实现该效果所需的 HTML 结构也很简单：

<!-- HTML -->
<div class="grid__container">
    <h1>The Experimental Layout Lab</h1>
    <h2>of Jen Simmons</h2>
    <div class="lists">
        <h3>The Conference Talks</h3>
        <ol>
            <li>
                <a href="#">Modern Layouts: Getting Out of Our Ruts</a>
            </li>
        </ol>
    </div>
    <ul class="workshop">
        <li>
            <a href="#">Layout Land Videos</a>
        </li>
    </ul>
    <p class="follow">Follow <a href="#">@jensimmons&l