具有CSS自定义属性的超级强大的网格组件

不久前，我写了一篇很受欢迎的文章，介绍如何将CSS变量与CSS网格相结合，以帮助构建更易维护的布局。但是CSS网格不仅仅是用于页面！这是一个常见的神话。尽管它对页面布局非常有用，但当涉及到组件时，我发现自己也经常接触网格。在本文中，我将在组件级别使用CSS网格。网格既不能替代flexbox，也不能替代flexbox。事实上，在构建组件时，将两者结合使用会给我们带来更大的威力。构建简单的组件在本演示中，我将介绍如何构建文本和图像组件，这是您在典型站点上经常构建的组件，也是我自己经常构建的组件。这就是我们的示例第一个组件应该是这样的：带有文本和图像的简单组件让我们设想一下，组成组件的元素需要与页面上的其他组件对齐到同一网格。这是覆盖网格列的同一组件（忽略背景）：覆盖网格列的同一组件您应该看到一个由14列组成的网格—12个固定宽度的中心列和两个灵活的列，每侧一列。（这些用于说明目的，在浏览器中不可见。）在元素上使用display: grid允许我们将该元素的direct children定位到网格容器上。我们保持简单，所以我们的组件只有两个网格子元素一个图像和一个文本块。该图像从第2行开始，跨越列轴上的七个轨迹。文本块从第9行开始，跨越五列。首先，我们需要从语义标记开始。尽管grid使我们能够将其子元素放置在我们选择的任何布局中，但是对于可访问性和不支持grid的浏览器，底层标记应该遵循逻辑顺序。下面是我们将用于网格组件的标记： The .grid__media和.grid__text类将用于定位子项。首先，我们需要定义网格容器。我们可以使用下面的CSS来调整网格轨迹的大小： .grid {display: grid;grid-template-columns:minmax(20px, 1fr) repeat(12, minmax(0, 100px)) minmax(20px, 1fr);grid-column-gap: 20px;} 这将为我们提供我们之前所演示的网格—12个最大宽度为100px的中心列，两边都有一个灵活的列，每列之间的间隙为20px。如果你对minmax()函数感兴趣，我写了一篇文章，解释了我们这里的网格列是怎么回事。在这种情况下，因为我们的图像和文本块都将位于同一个网格行轨迹上（我希望轨迹大小只使用默认的auto，它将根据其中的内容调整行的大小），我没有需要在这里声明我的网格行大小。但是，当涉及到不同的组件变体时，显式地将网格项放在同一行会使事情变得更容易，我们将很快进行讨论。如果您是网格新手，并且正在寻找入门的方法，我建议您转到gridbyexample.com. 现在不要太担心grid-template-columns声明，本文中的许多要点也可以应用于更简单的网格。现在，我们需要用下面的CSS放置网格项。网格为我们提供了一系列不同的方式来放置项目。在本例中，我使用的是grid-column，这是grid-column-start / grid-column-end的简写形式： .grid__media {grid-column: 2 / 9; /* Start on Column 2 and end at the start of Column 9 */}.grid__text {grid-column: 10 / 14; /* Start on Column 10 and end at the start of Column 14 */}.grid__media,.grid__text {grid-row: 1; /* We want to keep our items on the same row */} 如果在编写代码时很难将网格线可视化，在CSS注释中用ASCII来绘制它是一个很方便的方法。这里有一个我们正在运行的组件的演示，您可以打开或关闭背景来显示网格列： component variants 构建我们的组件非常简单，但是如果我们有许多相同组件的变体呢？下面是我们可能要使用的不同布局的一些示例：同一类型组件的四种不同布局变体如您所见，文本块和图像在网格上占据不同的位置，图像块跨越不同的列数。就我个人而言，我以前研究过的组件最多有9个变体！为这些类型的情况编写网格可能会变得很难管理，特别是当您将回退和响应等因素考虑在内时，因为我们的网格声明可能会变得很难扫描和调试。让我们看看如何使其更易于管理和维护。一致性首先，让我们确定哪些属性值将在我们的组件变体中保持一致，以便我们可以编写尽可能少的代码。在这种情况下，我们的文本块应该始终跨越四列，而我们的图像可以更大或更小，并与任何列对齐。对于我们的

具有CSS自定义属性的超级强大的网格组件

admin_action_{$_REQUEST[‘action’]}

admin_footer-{$GLOBALS[‘hook_suffix’]}

customize_save_{$this->id_data[‘base’]}

customize_value_{$this->id_data[‘base’]}

get_comment_author_url

network_admin_edit_{$_GET[‘action’]}

network_sites_updated_message_{$_GET[‘updated’]}

pre_wp_is_site_initialized

WordPress 的SEO 教学：如何在网站中加入关键字（Meta Keywords）与Meta 描述（Meta Description）？

谷歌的SEO是什么