20行CSS中的响应网格杂志布局

我最近在写一部现代版的blogroll。这样做的目的是以杂志的形式为读者提供从这些博客中挑选的最新文章，而不是仅仅在侧边栏中弹出我们最喜欢的博客的列表。最简单的部分是获取一个包含我们最喜欢的RSS提要摘录的文章列表。为此，我们使用了一个WordPress插件Feedzy-lite，它可以将多个feed聚合到一个时间顺序列表中，非常适合展示他们的最新产品。最困难的部分是让它看起来非常棒。插件的默认列表界面相当平淡，所以我想让它看起来像一个报纸或杂志网站，带有越来越小和更大的\"特色内容\"面板。这似乎是CSS网格的理想情况！为不同的布局创建一个网格布局，例如一个五列布局和一个三列布局，然后使用媒体查询在不同的断点处在它们之间切换。对吗？但是，当我们可以使用grid的auto-fit选项为我们自动创建一个流体响应网格时，我们真的需要这些媒体查询吗？以及识别断点的所有麻烦？；这种方法听起来很诱人，但当我开始引入跨列元素时，窄屏幕上的网格溢出给我带来了麻烦。媒体查询似乎是唯一的解决办法。也就是说，直到我找到解决办法！在看了几篇关于CSS网格的教程之后，我发现它们主要分为两个阵营：一个是向您展示如何使用跨区元素创建有趣布局的教程，另一个是说明如何创建自动调整大小的响应网格的固定列数的教程，但是，所有网格项的宽度都相同（即没有任何跨列）。我想让网格同时做到这两个方面：创建一个完全响应的流体布局，其中还包括响应性地调整多列元素的大小。好处在于，一旦您了解了响应网格的局限性，为什么柱跨会破坏网格，只需十几行代码再加上一个简单的媒体查询（如果您愿意限制您的跨度选项，甚至不需要媒体查询），就可以定义一个响应式杂志/新闻样式的布局。这里有一个视频，显示了RSS插件的开箱即用，以及我们设置样式后的外观；（演示）此杂志样式的网格布局完全响应，彩色的特色面板随着列数的变化而动态调整。页面显示大约50篇文章，但是布局代码对于显示的项目数量是不可知的。把插件放大到显示100个项目，布局会一直保持有趣。所有这些都是用CSS实现的，只需一个媒体查询就可以处理最窄屏幕上的一列显示（即小于460px）。难以置信，这个布局只使用了21行CSS（不包括全局内容样式）。然而，为了在这样几行代码中实现这样的灵活性，我必须深入研究其中一些比较模糊的部分；CSS网格，并学习如何绕过它的一些固有限制。生成这个布局的代码的基本元素非常短，并且证明了CSS网格的强大性： .archive {display: grid;grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));grid-gap: 32px;grid-auto-flow: dense;}/* Extra-wide grid-posts */.article:nth-child(31n + 1) {grid-column: 1 / -1;}.article:nth-child(16n + 2) {grid-column: -3 / -1;}.article:nth-child(16n + 10) {grid-column: 1 / -2;}/* Single column display for phones */@media (max-width: 459px) {.archive {display: flex;flex-direction: column;}} 本文中的技术同样可以用于设计任何动态生成的内容，比如输出从最新的posts小部件，存档页面或搜索结果。创建响应网格我设置了17个项目，显示各种模拟内容-标题、图像和摘录-它们都包含在包装中//codepen.io/anon/embed/xxbjjOJ？height=500&；theme id=1&；slug hash=>CodePen Embed Fallback 注意行的高度是如何自动调整以容纳行中最高的内容的。如果你改变笔的宽度，你会看到项目流动地增长和收缩，列数从1变为5，在这里，CSS的网格魔法是auto-fit关键字，它与应用于grid-template-columns的minmax()函数一起工作。，这将创建五个列，它们以不同的屏幕宽度增长和收缩，但始终保持在五个列上，导致它们在小屏幕上变得可笑地窄。第一个想法可能是创建一堆媒体查询，并用不同的列数重新定义网格。这可以很好地工作，但是使用auto-fit关键字，这一切都是自动完成的。要使auto fit按我们想要的方式工作，我们需要使用minmax()函数。这会告诉浏览器co有多小屏幕大小以***37***网格显示。演示）如您所见，虽然这是每个可能响应范围的有限子集，但实际上有很多可能性。 - ***38***很有趣，因为它创建了一个中心范围，一直到一列！； - ***39***最不有用，因为即使有两列，它也会导致溢出。 - ***40***令人惊讶。通过使用此列表中的各种***41***值，可以创建有趣且完全响应的布局。使用单个媒体查询最窄的单列显示，我们可以使用十种不同的***42***跨度模式。；单列媒体查询通常也很简单。最后一个演示中的一个恢复到在更小的屏幕上使用flexbox： ***43*** 这里是最终的网格，如您所见，从一列到五列完全响应：（演示）使用：nth-child（）重复可变长度显示最后一个技巧是***44***选择器，我使用它来设置网格中多个项目的样式。我希望我的span样式可以应用于feed中的多个项目，以便在整个页面中定期出现特色的邮箱。首先，我使用了一个逗号分隔的选择器列表，比如： ***45*** ，但是我很快就发现这个列表很麻烦，尤其是我必须为每个文章中我想要样式的子元素重复这个列表-比如标题、链接等等。在原型设计过程中，如果我想摆弄我跨越的元素的位置，我必须手动更改每个列表中的数字，这既繁琐又容易出错。这时我意识到我可以使用一个功能强大的***46***伪选择器，而不是我在上面列表中使用的简单整数。***47***也可以取一个等式，比如***48***，，它将针对每一个子元素。下面是我如何使用***49***在我的网格中创建蓝色全宽面板，这些面板出现在页面的最顶部，在下半程重复： ***50*** 括号中的位（***51***）确保选择1st、32nd、63rd等子级。浏览器运行一个循环，从>31*0+>）开始，然后>（***52*** 第一个选择器用于右侧的紫色框。***53***确保样式应用于每16个网格项，从第二个项开始。第二个选择器以右侧框为目标。它使用相同的间距（***54***），但偏移量不同（***55***）。因此，这些框经常出现在网格项10、26、42等的右侧。当谈到这些网格项及其内容的视觉样式时，我使用了另一个技巧来减少重复。对于两个框共享的样式（例如***56***），可以使用一个选择器来同时针对这两个选项： ***57*** 这将针对项目2、10、18、26、34、42、50等。&换言之，它同时选择左边和右边的特征框。它工作是因为8n正好是***58***的一半，并且因为两个单独的选择器中使用的偏移量有8的差异（即+10和+2之间的差异是8） Final thoughts用最少的代码创建灵活的响应网格，但这在定位元素方面确实有一些显著的限制，而无需使用媒体查询的反向步骤。如果能够指定不会在较小屏幕上强制溢出的范围，那就太好了。目前，我们有效地告诉浏览器，\"请制作一个响应网格\"，它做得很漂亮。但是当我们继续说\"哦，让这个网格项目跨越四列\"时，它在狭窄的屏幕上发出嘶嘶声，优先处理四列的跨度请求，而不是响应网格。如果能够告诉grid将响应性优先于我们的span请求，那就太好了。类似于这样： ***59*** 另一个关于响应网格的问题是最后一行。随着屏幕宽度的变化，最后一行通常不会被填充。我花了很长时间寻找一种方法，使最后一个网格项跨越（并因此填充）其余的列，但似乎你现在不能在网格中这样做。如果我们可以用auto这样的关键字来指定项目的开始位置，那就太好了，意思是\"请把左边的边放在它落下的地方。\"例如： ***60*** …这将使左边的边延伸到行的末尾

20行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是什么