我对CSS网格布局的了解

以下是奥利弗·威廉姆斯的客串帖子。奥利弗一直在使用CSS网格布局，并在这一过程中学到了很多东西。在这篇文章中，他将跳转到他在旅途中学到的不同概念。我喜欢这样一种想法，即尽可能通过单独的例子来学习网格布局。这使得学习整个过程变得不那么可怕。 CSS网格看起来将在2017年初登陆浏览器。在此之前，您需要启用grid才能正常工作（Firefox Nightly中默认启用grid的情况除外）。Chrome Canary目前拥有最好的实现。%/em>同时，Firefox有一个名为CSS Grid Inspector的非常宝贵的附加组件，可以显示网格的线条。它是目前唯一一款拥有这种工具的浏览器。在Chrome enter中`chrome://标志`在地址栏中，找到\"启用实验性Web平台功能\"，然后单击\"启用\"。IE和Edge有不同于当前规范的旧实现，因此，不建议在此时尝试使用网格。您不能使用俄罗斯方块形状的网格区域您可以很快自己解决这个问题。您的网格区域只能是矩形（如左侧），不是任意多边形（如右图）。网格设计为与flexbox一起使用，而不是代替它网格和flexbox可以以类似的方式工作。你可能见过有人使用flexbox来构建网格系统，但flexbox的设计并不是为了这个。值得一读的是Jake Archibald的博客文章《不要使用flexbox进行整体页面布局》（Don\"t use flexbox for overall page layout）。一种快速的思考方法是：flexbox用于一维布局（row或column）。CSS grid用于二维布局，或者如Rachel Andrews所说：flexbox基本上是用于布局单个维度中的项–行或列中的项。网格用于在两个维度（行和列）中布局项目。它们也可以组合在一起。可以将网格项转换为flex容器。您可以将弹性项转换为网格。让我们举一个有用的例子。我们希望垂直居中网格项目内的文本，但我们希望背景（无论是颜色，梯度或图像）覆盖整个网格区域的项目。我们可以使用值为center的align-items属性，但现在背景并不能填充项目的整个区域。align-items的默认值是stretch-一旦将其设置为任何其他值，它将不再填充空间。让我们将其设置为\"拉伸\"，并将网格项转换为一个flex容器。 .grid {align-items: stretch;}.griditem {display: flex;align-items: center;} 使用负数确实很有帮助。想象一下当前的CSS网格框架有一个12列网格。在小屏幕上，不是减少列数，而是让内容跨越所有12列，给人一种单一全宽列的印象。你可以用网格做同样的事情： /* For small screens */.span4, .span6, .spanAll {grid-column-end: span 12;}/* For large screens */@media (min-width: 650px) {.span4 {grid-column-end: span 4;}.span6 {grid-column-end: span 6;}} 这种方法没有错。然而，使用CSS网格，重新定义列的数量同样容易。通过使用-1，您可以确保您的内容始终到达结尾。 /* For small screens */.span4, .span6, .spanAll {grid-column-end: -1;} 对于大屏幕，您可能需要多达12列。对于移动电话来说，在1到4之间的任何地方。通过媒体查询可以很容易地更改grid-template-columns值。 .grid {grid-template-columns: 1fr 1fr;}@media (min-width: 700px) {.grid {grid-template-columns: repeat(12, 1fr);}} 对于所有屏幕大小，我们可能需要跨越整个视口的一些元素，例如页眉、页脚或一些英雄图像。对于小屏幕，我们可以这样写： .wide {grid-column: 1 / 3; /* start at 1, end at 3 */} ，一旦我们进行了媒体查询，这些元素将只覆盖12列中的前两列。我们可以在同一个媒体查询中包含新的所需的grid-column-end值13，但是有一个简单得多的方法。只需将end值设置为-1，它将跨越所有的列，不管有多少列。例如： .wide, .hero, .header, .footer {grid-column: 1 / -1;}网格区域创建隐式行名命名网格模板区域和网格行号是在网格上放置内容的两种方法，但您可以在同一网格中使用这两种放置方法。您还可以使用在指定网格区域时创建的隐式行名称。 .grid {grid-template-areas: \"main main sidebar sidebar\";} 通过此代码，我们刚刚创建了四个隐式行名称：main start、main end、sidebar start，和侧边栏结束。如果您想在多个网格区域或一个网格区域的特定子区域中重叠内容，这可能很有用。还有第二种定义网格区域的方法就像网格区域创建行名称一样，特定的行名称可以创建网格区域。定义网格区域的语法如下所示： .grid {grid-template-areas:\"header header header\"\"main main sidebar\"\"footer footer footer\";} 此语法可以如果您的设计中有大量的空白空间（句点太多），就会变得有些笨拙！句点代替名称表示空单元格。）您可能不知道还有另一种方法来定义网格区域。我们可以随意命名网格线。但是，如果我们遵循命名约定和，我们可以创建网格区域。这里有一个例子： Because we\"re doing this by hand I want to use % for the x value, but unfortunately that will end up looking like this: Again, we have a problem with the final element not aligning as we might expect it to. The middle labels are misplaced as well; ideally they would be centered underneath their marks. I thought I might have to nudge each element into place with the correct x value before Chris pointed me to the text-anchor 你可能不会用这个方法布置一整页的内容，但是如果你想把text-align布局和基于行号的布局结合起来，很高兴知道。 usevmin for a equal size box layout CSS grid允许您对行和列使用任何大小单位。想要同样大小的盒子，但也希望他们是响应？如果您希望内容随容器调整大小，可以使用视口单位。 g 这在台式机和笔记本电脑上非常有效，但在屏幕高度超过宽度的移动电话上，我们的内容将溢出，从而创建一个水平滚动条。杜德利Story最近写了一篇博客文章，讲述了一个鲜为人知的css单元：vmin的用处。这个单位是纵向屏幕上视口宽度的百分比和横向屏幕上视口高度的百分比。 That will look like: That\"s it! With a little bit of knowledge about how viewBox 我们现在有大小相等的框，可以适应任何屏幕大小。绝对定位当您绝对定位网格项时，它的定位上下文不是它的容器（即整个网格），我们可以根据它指定的网格列和网格行的开始行和结束行来定位它。像往常一样，x从文档流中删除一个元素（即它被其他元素忽略）。如果要在不中断栅格自动放置算法的情况下重叠栅格项，则绝对定位非常有用。自动放置不会重叠项，除非您为每个项显式声明y和text-anchor值。在本例中尝试从div中删除***24***，并考虑需要为多少项定义网格列和网格行属性！订单的工作方式与您的想法不同如果您使用了flexbox***25***属性，那么您已经涵盖了这一点。所有网格项的默认订单值为***26***。因此，应用于网格项的***27***将使在之后，而不是之前可以使用负数将项推到前面。minmax的限制是否希望列在它们之间平均分配空间，直到它们达到最大宽度？你可能认为你可以这样使用***28***： ***29*** 不幸的是，这行不通。如果max的值小于min，则忽略它。***30***作为***31***中的最小值无效。然而，这是一个很容易实现的行为。当在***33***或***34***中用作值时，单词***32***将使列或行与其内容一样大。然后我们可以在内容上设置***35***： ***36*** 对于***37***的工作方式和我没有想到的用例可能有很好的理由。即便如此，我还是在Medium上写了一整篇文章，题为\"我讨厌网格的一件事\"。如果你命名网格线，事情就简单多了你可以采取多种方法。如果你真的喜欢打字，你可以给行多个名字。 ***38*** 最简单的命名惯例是使用网格自动编号。我们不必键入[col2]，只需键入名称***39***，然后键入一个数字。 ***40*** 结合span关键字，我们就可以不再考虑行号，而是开始考虑我们希望内容填充的第一列以及要占用的列数，这更直观。 ***41***fr单元消除了对数学的需求，假设我们要将网格分成四个相等的列。计算百分比很容易。我们只写***42***. 如果我们想利用***43***属性呢？***44***. 我们的列之间有三个间隙，所以我们的网格宽度现在将是100%+30px，不需要的水平滚动将出现一些内容在右侧的屏幕上溢出。我们可以使用calc来解决我们的问题，但是使用fr单元要容易得多：**45***。关于grid，我讨厌的第二件事是没有办法强制自动放置算法将某些列或行留空 ***46***值提供了一种简单的方法来分隔内容。虽然我们可以指定一个单独的值来用***47***和***48***分隔列和行，但这些值必须是一致的。如果我们想把第一排和第二排分开十个像素els和50像素的第二行和第三行，网格为我们提供了除创建行并保持它们为空之外的任何方法。您可能已经看到了***49***语法中的句点/点： ***50*** 这可以提供一种简单的方法来控制自动放置算法，阻止它在这些区域放置项目。不幸的是，它不是这样工作的：这个语法只是表示我们不想把第三行变成一个命名的网格区域。自动放置的项目仍然会在那里结束。一些设计建议：您不一定需要12列（并且列的大小不需要统一） 12列是web设计的默认值。Bootstrap网格使用12列，并且几乎每一个其他网格框架都有。这样做有一个很好的理由：12可以被3和4整除，这样我们就可以更灵活地在页面上布局内容。我们可以将内容平均分为12个部分、6个部分、4个部分、3个部分或一半。而有些人喜欢在每个项目中始终使用相同的网格所带来的熟悉感，没有必要拥有比实际需要更多的列，您应该构建适合您的内容和所需布局的网格，而不是一刀切的设置。Gridset是制作网格的一个有用工具，但是一旦原生的CSS网格模块登陆，你就不需要像这样的工具了。它展示了一些设计精良的网格。

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