酷的小CSS网格技巧为您的博客

大约十年前，我在修改自己创建的博客外观时发现了CSS。很快，我就能够用更多的数学知识编写一些很酷的东西，因此，更容易理解像转换这样的特性。然而，CSS的其他领域，比如布局，一直是一个痛苦的根源。这篇文章是关于我在大约十年前遇到的一个问题，直到最近，我还不知道如何以一种聪明的方式来解决这个问题。具体来说，它是关于我如何使用现代CSS网格技术找到解决一个长期问题的方法，在这个过程中，它给了我比我最初想象的更酷的结果。注意，这不是一个关于如何最好地使用CSS网格的教程，而是一个我自己的学习过程。这个问题我第一次在博客上发布的是来自城市的随机照片，所以我有了一个固定大小的缩略图网格的想法。为了获得更好的外观，我希望这个网格与上面和下面的段落中对齐，但同时，我希望最后一行的缩略图与网格左对齐。同时，文章的宽度（以及其中网格的宽度）将取决于视口。 HTML看起来是这样的： It may seem simple, but it turned out to be one of the most difficult CSS problems I\"ve ever encountered.Less than ideal solutions These are things I have tried or seen suggested over the years, but that never really got me anywhere.Floating impossibility Floats turned out to be a dead end because I couldn\"t figure out how to make the grid be middle aligned this way. .grid--thumbs { overflow: hidden; }.grid--thumbs a { float: left; } 下面的演示显示了浮动尝试。调整嵌入的大小，以查看它们在不同视口宽度下的行为。CodePen嵌入回退inline-block疯狂起初，这似乎是一个更好的主意： .grid--thumbs { text-align: center }.grid--thumbs a { display: inline-block } 但结果是\"不是：CodePen Embed Fallback在本例中最后一行没有左对齐。由于CodePen上意外的CSS自动完成，我发现了一个名为text-align-last的属性，它决定了块的最后一行如何对齐。不幸的是，将text-align-last: left设置为on网格也不是我想要的解决方案：CodePen Embed Fallback 此时，我实际上考虑放弃中间对齐网格的想法。网格上的text-align: justified和text-align-last: left组合能否产生更好的结果？好吧，事实证明不是这样的。也就是说，除非最后一行只有一个缩略图，而且列之间的间隙也不是太大。调整下面嵌入的大小以了解我的意思。CodePen嵌入回退，经过九年的尝试，并没有找到解决这个问题的方法。凌乱的flexbox黑客们一个flexbox解决方案一开始似乎是可行的，就是在网格上添加一个::after伪元素，并在缩略图和这个伪元素上设置flex: 1： .grid--thumbs {display: flex;flex-wrap: wrap;a, &::after { flex: 1; }img { margin: auto; }&:after { content: \"AFTER\"; }} 下面的演示展示了如何这种方法有效。我已经给出了缩略图和::after伪元素的紫色轮廓，以便更容易地看到发生了什么//codepen.io/anon/embed/GRpwmqQ？height=550&；theme id=1&；slug hash=>CodePen Embed Fallback 这不是我想要的，因为缩略图的网格不是中间对齐的。也就是说，它看起来不太糟…只要最后一行的图像比其他行少一个项目。但是，一旦这种情况发生变化，如果缺少更多的项目或没有项目，布局就会中断。为什么::after黑客不可靠。这是一个黑客的想法。另一个是不使用伪元素，但是，在缩略图后面添加尽可能多的空div，因为我们希望有很多列。由于缩略图的大小是固定的，我们应该能够估计出预期的列数，而且我们可能希望设置文章的最大宽度，因为可以设置横跨整个屏幕宽度的文本在视觉上让人精疲力尽。将最大宽度除以固定的缩略图宽度，就可以得到这种情况下的最大列数。第一个空元素将占据未完全填满缩略图的行的整个宽度，而其余元素将溢出到其他行中。但是因为他们的height是零，所以从视觉上看就无关紧要了//codepen.io/anon/embed/vvvqxv？height=550&；theme id=1&；slug hash=>CodePen-Embed-Fallback 这种方法确实有效，但是，同样的，它很粗糙，仍然不能产生我想要的确切结果，因为它有时会在列之间产生很大的、看起来很难看的间隙。网格解决方案？mp；theme id=1&；slug hash=>CodePen Embed Fallback 我个人最喜欢的是缩略图网格的最初想法，它中间对齐，列宽基本固定（但仍然使用***40***而不是***41***）。归根结底，这是个人喜好的问题，在下面的演示中可以看到的东西恰好更适合我：CodePen Embed Fallback 我在这个演示中使用***42***，因为它产生与***43***相同的结果，并且短了一个字符。但是，我不明白的是，这两个关键字产生的结果是一样的，因为库中的项目比我们需要填充一行的项目要多。但是一旦改变了，就会产生不同的结果，***44***和***45***，如下所示。您可以更改***46***值和放置在网格上的项目数：CodePen Embed Fallback 我不确定哪个是更好的选择。我想这也取决于个人喜好。加上***47***，***48***似乎是更符合逻辑的选择，但同时，***49***产生了一个更好看的结果

酷的小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是什么