<em id="ii1f9"></em>

    <ruby id="ii1f9"><p id="ii1f9"><tt id="ii1f9"></tt></p></ruby>
      <li id="ii1f9"></li>
      1. <rp id="ii1f9"></rp>

        <s id="ii1f9"><strike id="ii1f9"><u id="ii1f9"></u></strike></s>

        1. <tbody id="ii1f9"><center id="ii1f9"></center></tbody>
        2. Menu

          用CSS网格构建的8个常见网站布局

          <返回列表

          CSS网格的许多优点之一是它能够轻松地创建复杂的布局。你不需要太多的代码。不需要危险的黑客攻击。一些相对简单的行可以帮助您快速完成过去需要几个小时的事情。

          当然,CSS网格也是令人难以置信的强大的. 开发人员已经看到了一些极限。

          虽然这令人印象深刻,但这个规范的真正优点在于它帮助我们完成日常任务。构成典型网站项目的常见页面和功能布局。这是我们开始使用CSS网格的最大原因。

          我们收集了8个常见的网站布局概念。每一个都展示了CSS网格如何使web设计者的生活更轻松。Flexbox和其他一些有关的技术也包括在内。我们开始吧!

          发现布局的“圣杯”

          乍一看,这种“圣杯”布局看起来并不难。事实上,我们已经看到它很多年了。问题一直是可用的CSS布局方法在设置时不是很有效。传统上它需要黑客把它弄得恰到好处。CSS网格就不一样了。CSS技巧组合配套文章在过程中

          选择卡片界面

          卡片布局用户界面现在是一件大事。有很多不同的方法让它们与众不同。这组示例展示了CSS网格如何使用相同的HTML标记并创建完全不同的外观。

          响应式多专栏博客

          这里有一个吸引人的多栏博客布局,它很好地实现了空白。每一篇文章都有自己的闪光点。另外,它可以适应小屏幕而不会出现问题。这个布局也很容易扩展,列和行更多,只需对属性进行一些调整(grid-template-columns ,网格模板行)走开