重新设计站点以使用 CSS 网格布局

suchonaseo

在本文中，我们将通过创建响应式多列网站布局来了解 CSS 网格的实际应用。 网格是当今 Web 开发中的一个新的热门趋势。忘记表格布局和浮动：一种设计网站的新方法已经出现！该技术引入了二维网格，它使用少量 CSS 规则定义多个布局区域。 Grid 可以使960gs或Bootstrap grid等第三方框架变得多余，因为您可以轻松地自己完成所有事情！尽管 Internet Explorer 实现了旧版本的规范，但所有主要浏览器都支持此功能。 如果您不熟悉网格布局，请查看我们的CSS 网格初学者指南。 我们要构建什么 因此，我们被要求创建一个典型的网站布局，其中包含标题、主要内容区域、右侧边栏、赞助商列表和页脚： Learn to Code with JavaScript 最初的起点 另一位开发人员已经尝试解决此任务，并提出了一个涉及 float、display: table和一些clearfix hack 的解决方案。

我们将把这个现有布局称为“初始”： 直到最近，浮动还被认为是创建此类布局的最佳选择。在此之前，我们必须使用 HTML 表格，但它们有许多缺点。具体来说，这样的表格布局非常死板，需要大量的标签（table、tr、等），并且从语义上讲td，th这些标签用于呈现表 WhatsApp 号码数据 格数据，而不是设计布局。 但 CSS 仍在不断发展，现在我们有了 CSS 网格。从概念上讲，它类似于旧的表格布局，但可以使用具有更灵活布局的语义 HTML 元素。 规划电网 首先，我们需要为我们的文档定义一个基本的 HTML 结构。在此之前，我们先简单讨论一下最初的示例是如何工作的。它有以下主要块： .container是左右边距较小的全局包装器。 .main-header是包含.logo(占据 20% 空间，向左浮动) 和.main-menu(占据 79% 空间，向右浮动) 的标头。标头还被分配了一个 hacky 修复来清除浮动。



和 the .sidebar（占据 33.3% 的空间，向右浮动）。包装器本身也分配有一个clearfix。包含赞助商的徽标。在里面，有一个sponsors部分的display属性设置为table。每个赞助商依次显示为表格单元格。 .footer是我们的页脚，占据了 100% 的空间。 我们的新布局将与最初的布局非常相似，但有一个例外：我们不会添加包装器，因为不再需要clearfixes。这是新版本的 请注意，您可以将 用作body全局.container；在这种情况下，这只是一个偏好问题。总而言之，我们有六个主要领域： 标识 菜单 主要内容 侧边栏 赞助商 页脚 通常建议您实施移动优先的方法。也就是说，您从移动布局开始，然后为更大的屏幕添加样式。在这种情况下，这是不必要的，因为我们正在调整已经在小屏幕设备上回落到线性化视图的初始布局。因此，我们首先关注网格的实现，然后再讨论响应性和回退规则。