css grid_为什么显示：内容不是CSS Grid Layout子网格-CSDN博客

css grid

You won’t get far through a conversation about subgrid in CSS Grid Layout without someone suggesting that display: contents solves most of the problems anyway, so do we really need subgrid? This really isn’t the case, display: contents does indeed solve a class of problems, but these are different problems to those that subgrid would help us with. In this post I take a look at the different use cases.

在没有有人建议display: contents情况下，您不会在CSS Grid Layout中通过有关subgrid的对话走得太远display: contents无论如何， display: contents解决了大多数问题，那么我们真的需要subgrid吗？ display: contents确实不是这样display: contents确实可以解决一类问题，但是这些问题与subgrid可以帮助我们解决的问题不同。在本文中，我将介绍不同的用例。

If these features are new to you, I have written previously about the very useful display: contents which is in Firefox and is in the process of being implemented in Chrome. I’ve also written about the dropping of the subgrid feature from the Level 1 CSS Grid Layout specification. These posts would provide some useful background context to this one.

如果这些功能是您不熟悉的，我之前已经写过关于非常有用的display: contents Firefox中的display: contents ，正在Chrome中实现。我还写了关于从1级CSS网格布局规范中删除子网格功能的信息。这些职位将为这一职位提供一些有用的背景信息。

我的示例布局 (My example layout)

This is the sort of layout you get from someone who lives under the blissful assumption that content will emerge from the CMS with perfectly even line lengths.

这是您生活在一个幸福的假设之下的布局，该假设是内容将从CMS中以完美的行长出现。

At first glance this looks like a pretty straightforward grid layout, which we can create with just a few lines of code.

乍一看，这看起来像一个非常简单的网格布局，我们只需要几行代码就可以创建它。

.grid {
  display: grid;
  max-width: 960px;
  margin: 0 auto;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
}.grid {
  display: grid;
  max-width: 960px;
  margin: 0 auto;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
}

However, when the real world of content happens to our layout we end up with something like this:

但是，当内容的真实世界发生在我们的版式中时，我们最终会得到如下结果：

The items inside each card are not direct children of the grid container and therefore we have no way to line up the internal elements with each other.

每张卡中的项目不是网格容器的直接子项，因此我们无法将内部元素彼此对齐。

The best I can do is to make each card a grid container itself, or a flex item and use that to push the foster down to the bottom. This is a bit neater but what I really would like is for the card internals to also line up in rows.

我能做的最好的事情就是使每张卡本身成为一个网格容器或一个弹性物品，并用它来将寄养人推到最底端。这有点整洁，但是我真正想要的是让卡的内部也排成一行。

The subgrid feature that was removed from the level 1 specification would allow us to achieve this. I can’t show you working code, but I can explain how it would work with our design.

从1级规范中删除的子网格功能将使我们能够实现这一目标。我无法向您展示有效的代码，但可以解释它如何与我们的设计一起使用。

Each card has four child elements, making four rows. The title, the image, the content and the footer.

每张卡具有四个子元素，组成四行。标题，图像，内容和页脚。

The elements with a class of .card are a direct child of the grid container, so they participate in grid layout - meaning that our cards display in rows and columns. We need four rows for the elements in our card, so I set the card to span four rows of the grid. We would then need to set the card itself to display: subgrid, this would mean that the four child elements of our card would now participate in the parent grid layout and slot one into each row. As each card would do the same, the rows across the entire grid would line up.

具有.card类的.card是网格容器的直接子元素，因此它们参与网格布局-这意味着我们的卡以行和列显示。卡中的元素需要四行，因此我将卡设置为跨越网格的四行。然后，我们需要将卡本身设置为display: subgrid ，这意味着卡的四个子元素现在将参与父网格布局，并在每一行中插入一个。由于每张卡都将执行相同的操作，因此整个网格上的行将对齐。

There are no implementations of this. I based my example code on the proposal that was removed from level 1, already a revised and simplified proposal from earlier versions of the spec. In reality we would need to do a little more work to get gaps round the cards and not the internal rows, however we could get our internal rows aligned with each other fairly easily.

没有任何实现。我的示例代码基于从级别1删除的提案，该提案已经是规范早期版本中的修订和简化提案。实际上，我们需要做更多的工作来消除卡片之间的间隙，而不是内部行，但是我们可以很容易地使内部行彼此对齐。

可以显示：内容可以达到相同的目的吗？ (Can display: contents achieve the same thing?)

What display: contents does is remove the box of the element it is applied to. This is useful if you have an element required for semantic rather than visual purpose and want its children to participate in a grid or flex layout.

display: contents要做的就是删除要应用到的元素的框。如果您具有语义而非视觉目的所需的元素，并且希望其子元素参与网格或flex布局，则此功能很有用。

If you take the following example, of two sets of HTML. They are identical, other than that one has a class of flex and the other grid.

如果采用以下示例，则为两组HTML。它们是相同的，除了一个具有一类flex和另一个网格。

<div class="flex">
  <div>One</div>
  <div>Two</div>
  <div class="nested">
        <div>Nested One</div>
        <div>Nested Two</div>
  </div>
</div>

<div class="grid">
  <div>One</div>
  <div>Two</div>
  <div class="nested">
        <div>Nested One</div>
        <div>Nested Two</div>
  </div>
</div><div class="flex">
  <div>One</div>
  <div>Two</div>
  <div class="nested">
        <div>Nested One</div>
        <div>Nested Two</div>
  </div>
</div>

<div class="grid">
  <div>One</div>
  <div>Two</div>
  <div class="nested">
        <div>Nested One</div>
        <div>Nested Two</div>
  </div>
</div>

We can make two very simple layouts, one for flex and one for grid. I am adding borders to the container, and the direct children of the container.

我们可以制作两种非常简单的布局，一种用于弹性布局，一种用于网格布局。我正在为容器以及容器的直接子代添加边框。

You can see how only the direct child elements become part of the grid or flex layout. The nested elements display in block flow.

您可以看到只有直接子元素如何成为网格或弹性布局的一部分。嵌套元素以块流形式显示。

Nested items are not part of flex or grid layout

The items that contain nested elements have a class of nested. We can target that and see what happens if we change the display value of those elements to contents.

包含嵌套元素的项目具有一类nested 。我们可以针对这一点，看看我们是否改变这些元素的显示值发生了什么contents 。

.nested {
  display: contents;
}.nested {
  display: contents;
}

If you are using Firefox or Chrome Canary you will see that the nested items now begin to participate in the grid and flex layouts, as the box of their parent has disappeared meaning that they act as if they were direct children of the flex or grid item.

如果您使用的是Firefox或Chrome Canary，则您会看到嵌套项现在开始参与网格和flex布局，因为其父级的框已消失，这意味着它们的行为就好像它们是flex或grid项的直接子级一样。

However, they have not become direct children. I used a selector that would only target direct children to apply borders and add the flex property. Our items have no border and the flex items have not had flex:1 applied so are using the default flex properties.

但是，他们还没有成为直系子女。我使用了仅将直接子对象作为目标的选择器，以应用边框并添加flex属性。我们的商品没有边框，并且flex商品没有应用flex:1因此使用的是默认的flex属性。

You can also see that the border on the item with display: contents has gone, as the box has gone. You cannot apply backgrounds and borders to an item with display: contents. This then, is a big reason why display:contents can’t patch a lack of subgrid. If we return to our earlier example with the cards that we want to line up, we could apply display: contents to the card, which is the direct child of the grid.

您还可以看到带有display: contents的项目的边框消失了，因为框也消失了。 您不能将背景和边框应用于显示内容的项目。 那么，这就是display:contents无法修补缺少子网格的重要原因。如果返回前面的示例，并带有要排队的卡片，则可以将display: contents应用于卡片，它是网格的直接子元素。

However, as we are using auto-placement to lay out our cards, once the outer box is removed the internal items from each card now participate in grid layout and so are auto-placed. We now get the title in the first grid cell, then to the right the image, then the contents, then we move onto the next row for the footer. Then the next card begins.

但是，由于我们使用自动放置来布置卡片，一旦移除了外盒，每个卡片中的内部物品就会参与网格布局，因此也会被自动放置。现在，我们在第一个网格单元中获得标题，然后在图像的右侧，然后是内容，然后移至页脚的下一行。然后下一张卡开始。

You could change the flow of these to column, which would stack them up but then you would need to decide how many rows there were in order to force the wrapping into columns.

您可以将它们的流程更改为column，这会将它们堆叠起来，但是随后您需要确定有多少行才能强制将其包装成列。

To get anywhere close to the layout we hoped for we are going to need to place each item on the grid, ensuring that the parts of our card are placed where we want them. This is the CSS required for one card:

为了使布局更接近我们希望的位置，我们需要将每个项目放置在网格上，确保将卡片的各个部分放置在我们想要的位置。这是一张卡所需CSS：

.card:nth-child(1) h2{ 
  grid-column: 1; 
    grid-row: 1; 
}
.card:nth-child(1) img{ 
  grid-column: 1; 
    grid-row: 2; 
}
.card:nth-child(1) .inner{ 
  grid-column: 1; 
    grid-row: 3; 
}
.card:nth-child(1) footer{ 
  grid-column: 1; 
    grid-row: 4; 
}.card:nth-child(1) h2{ 
  grid-column: 1; 
    grid-row: 1; 
}
.card:nth-child(1) img{ 
  grid-column: 1; 
    grid-row: 2; 
}
.card:nth-child(1) .inner{ 
  grid-column: 1; 
    grid-row: 3; 
}
.card:nth-child(1) footer{ 
  grid-column: 1; 
    grid-row: 4; 
}

You can see the full worked example in the following CodePen - you need to use Firefox or Chrome Canary to see the display as in the screenshot below.

您可以在以下CodePen中查看完整的示例- 您需要使用Firefox或Chrome Canary才能看到显示，如下面的屏幕截图所示。

See the Pen why display: contents can't solve subgrid issues by rachelandrew (@rachelandrew) on CodePen.

见笔为什么显示：内容解决不了问题亚格通过rachelandrew（ @rachelandrew上） CodePen 。

Note that this actually doesn’t get us what we want. We have lost the background and borders and spacing around the cards. We have lost auto-placement and the ability to have as many rows of cards as are needed. This is not a good use of display: contents and is exactly why we need sub grid in Grid Layout.

请注意，这实际上并不能满足我们的需求。我们已经失去了卡片的背景，边框和间距。我们失去了自动放置功能，无法拥有所需的多行卡片。这不是很好地使用display：contents，这正是我们在Grid Layout中需要子网格的原因。

什么时候应该使用display：contents？ (When should you use display: contents?)

Once we have implementations in all our browsers I think there will be plenty of great uses for display: contents. The time to use it is when the element you are removing has no box styling - backgrounds, borders and so on. It should help us to maintain good semantic structure, while also being able to get the layouts we want. Let’s hope we also get subgrid support soon, as between these two features we’ll add a great deal more power to our grid layouts.

一旦我们在所有浏览器中实现了实现，我认为显示将有很多很好的用途display: contents 。使用它的时间就是要删除的元素没有框样式（背景，边框等）时。它应该有助于我们保持良好的语义结构，同时也能够获得所需的布局。希望我们也能尽快获得子网格支持，因为在这两个功能之间，我们将为网格布局增加更多的功能。

To help encourage adoption of display: contents in more browsers then you could head over to Edge UserVoice and give the feature an upvote. The subgrid feature has been moved to Level 2 of CSS Grid Layout. If you have thoughts and use cases for subgrid then please do write those up, if you ping me about them I’ll add them to my list for when this is discussed. Remember that it is while a specification is in the early stages that you get the chance to have your requirements be part of the discussion and hopefully then solved by the resulting spec.

为了鼓励鼓励采用display: contents在更多浏览器中的display: contents ，您可以转到Edge UserVoice并对该功能进行投票。子网格功能已移至CSS网格布局的第2级。如果您有关于子网格的想法和用例，请务必将其写下来，如果您对它们进行ping操作，则在讨论该问题时会将它们添加到我的列表中。请记住，只有在规范处于早期阶段时，您才有机会将自己的要求纳入讨论范围，并希望随后通过最终的规范解决。