在CSS网格中自动调整列大小：`Auto fill`vs`Auto fit`

最强大和最方便的CSS网格特性之一是，除了显式地调整列大小之外，我们还可以选择重复以填充网格中的列，然后在其中自动放置项。更具体地说，我们能够指定网格中需要多少列，然后让浏览器为我们处理这些列的响应，在较小的视口大小上显示较少的列，并在屏幕属性允许更多列时显示更多的列，不需要编写一个单一的媒体查询来指示这种响应行为，我们只需要使用一行CSS就可以做到这一点，这一行让我想起了当邓布利多在贺拉斯的公寓里挥动魔杖时，家具飞回了原来的位置；装饰物在半空中被改造，羽毛放大到它们的垫子上；撕破的书落在书架上时自行修复…… 这个神奇的、无媒体查询的响应是通过使用repeat()函数和自动放置关键字来实现的。总而言之，repeat()函数允许您根据需要重复多次列。例如，如果您正在创建一个12列的网格，您可以编写以下一行代码： .grid {display: grid;/* define the number of grid columns */grid-template-columns: repeat(12, 1fr);} 1fr告诉浏览器在列之间分配空间，以便每列平均获得该空间的一小部分。也就是说，它们都是流动的、等宽的列。在这个例子中，不管网格有多宽，它总是有12列。您可能已经猜到了，这还不够好，因为在较小的视口中内容会被压扁。因此，我们需要从指定列的最小宽度开始，确保它们不会变得太窄。我们可以使用minmax()函数来实现这一点。 grid-template-columns: repeat( 12, minmax(250px, 1fr) ); 但是按照CSS网格的工作方式，这将导致行溢出。如果视口宽度太窄，无法满足新的最小宽度要求，列将不会换行，因为我们明确告诉浏览器每行重复12次列。要实现换行，我们可以使用auto-fit或auto-fill关键字。 grid-template-columns: repeat( auto-fit, minmax(250px, 1fr) ); 这些关键字告诉浏览器为我们处理列大小和元素换行，这样当宽度不够大时，元素将换行而不会溢出。我们使用的分数单位还可以确保，如果宽度允许一个列的一小部分可以容纳，而不是一个完整的列，那么空间将被分配到已经容纳的一列或多列上，以确保行尾没有留下任何空格。在名称的第一个glace处，可能看起来auto-fill和auto-fit是对立的。但事实上，这两者之间的区别是非常微妙的。也许你在专栏的末尾用auto-fit获得了额外的空间。但是什么时候，怎样？让我们来看看引擎盖下到底发生了什么。填充还是调整？有什么区别？在最近的一次CSS研讨会上，我总结了auto-fill和auto-fit之间的区别如下： auto-fill用尽可能多的列填充行。因此，只要新列可以容纳，它就会创建隐式列，因为它试图用尽可能多的列填充行。新添加的列可以是空的，也可以是空的，但它们仍将占用行中指定的空间。 auto-fit通过展开当前可用的列，使它们占用所有可用的空间，从而将它们放入该空间。浏览器在用额外的列（如auto-fill）填充额外的空间，然后折叠空的列之后就会这样做。起初这听起来可能会让人困惑，但当您将此行为可视化时，它会更有意义。因此，我们将使用Firefox DevTools的网格检查器帮助我们可视化网格项和列的大小和位置。以下面的演示为例。这些列是使用repeat()函数定义的，最小宽度为100px，最大宽度为1fr，这样它们就可以扩展，并在有多余空间时平等地共享空间。至于每行的列数，我们将使用自动放置关键字，这样我们就可以让浏览器处理网格的响应性，并在需要时将列包装成新行。浏览器将使用auto-fill关键字放置第一个示例中的列并调整其大小，它将使用auto-fit作为第二个。 .grid-container--fill {grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));}.grid-container--fit {grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));} 到一定程度，auto-fill和auto-fit显示相同的结果。但它们在引擎盖下的行为并不相同。恰好，在一定的视窗宽度内，这两个关键字会给出相同的结果。这两个关键字开始显示不同行为的点取决于

在CSS网格中自动调整列大小：`Auto fill`vs`Auto fit`

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