在本文中，我们将展示如何创建响应式现代 CSS 网格布局，演示如何使用旧浏览器的后备代码，如何逐步添加 CSS 网格，以及如何使用对齐方式在小型设备和中心元素中重构布局特性。 Backward Skip 10s Play Video Forward Skip 10s 在上一篇文章中，我们探索了四种不同的技术来轻松构建响应式网格布局。那篇文章写于 2014 年——CSS 网格可用之前——所以在本教程中，我们将使用类似的 HTML 结构，但采用现代 CSS 网格布局。 在本教程中，我们将使用浮动创建一个具有基本布局的演示，然后使用 CSS 网格对其进行增强。我们将演示许多有用的实用程序，例如居中元素、跨越项目以及通过重新定义网格区域和使用媒体查询轻松更改小型设备上的布局。
您可以在这支笔中找到代码： Learn to Code with JavaScript 响应式现代 CSS 网格布局 在我们深入创建响应式网格演示之前，我们首先介绍一下 CSS 网格。 CSS 网格是一个强大的二维系统，于 2017 年被添加到大多数现代浏览器中。它极大地 WhatsApp 号码数据 改变了我们创建 HTML 布局的方式。网格布局允许我们在 CSS 而不是 HTML 中创建网格结构。 大多数现代浏览器都支持 CSS 网格，但 IE11 除外，IE11 支持旧版本的标准，可能会出现一些问题。您可以使用 检查支持。 网格布局有一个父容器，其display属性设置为grid或inline-grid。容器的子元素是网格项，它们通过强大的网格算法隐式定位。您还可以应用不同的类来控制项目的放置、尺寸、位置和其他方面。
让我们从一个基本的 HTML 页面开始。创建一个 HTML 文件并添加以下内容我们使用 HTML 语义来定义页面的页眉、侧边栏、主要部分和页脚部分。在主要部分中，我们使用标签添加一组项目<article>。<article>是一个 HTML5 语义标签，可用于包装独立且自包含的内容。单个页面可以有任意数量的<article>标签。 这是此阶段页面的屏幕截图： 到目前为止基本的 HTML 布局 Learn to Code with JavaScript 接下来，让我们添加基本的 CSS 样式。在文档头部添加标签，并添加以下样式这是一个小型演示页面，因此我们将直接设置标签样式以提高可读性，而不是应用类命名系统。 我们使用浮动将侧边栏定位到左侧，将主要部分定位到右侧，并将侧边栏的宽度设置为固定的6.3rem宽度。
發表於 11:38:04
