CSS 如何隐藏未在grid-template-areas中指定的元素

在本文中，我们将介绍如何使用CSS隐藏未在grid-template-areas中指定的元素。当使用CSS Grid布局时，我们可以通过grid-template-areas属性来指定网格布局，并将元素放置到指定的区域中。然而，如果我们没有为所有区域指定元素，那么未指定的元素可能会显示出来。现在，让我们看看如何通过CSS隐藏这些未指定的元素。

阅读更多：CSS 教程

使用display: none属性隐藏元素

display: none属性是一种常用的CSS属性，可以将元素完全隐藏。通过这个属性，我们可以选择性地隐藏网格布局中未指定的元素。

.grid-item:not([grid-area]) {
  display: none;
}

在上面的示例中，我们使用了:not()选择器来选择没有grid-area属性的.grid-item元素。然后，我们将这些元素的display属性设置为none，从而将其隐藏起来。

下面是一个完整的示例，演示了如何使用display: none属性隐藏未指定的元素。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Grid Hide Elements</title>
  <style>
    .grid-container {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: 100px 100px;
    }

    .grid-item {
      border: 1px solid black;
      padding: 10px;
    }

    .grid-item:nth-child(1) {
      grid-area: header;
    }

    .grid-item:nth-child(2) {
      grid-area: sidebar;
    }

    .grid-item:nth-child(3) {
      grid-area: content;
    }

    .grid-item:nth-child(4) {
      grid-area: footer;
    }

    .grid-item:not([grid-area]) {
      display: none;
    }
  </style>
</head>
<body>
  <div class="grid-container">
    <div class="grid-item">Header</div>
    <div class="grid-item">Sidebar</div>
    <div class="grid-item">Content</div>
    <div class="grid-item">Footer</div>
    <div class="grid-item">Extra</div>
  </div>
</body>
</html>

在上面的示例中，我们创建了一个带有网格布局的.grid-container，其中包含了header、sidebar、content和footer四个网格项目。然后，我们在第五个网格项目上添加了一个额外的.grid-item元素，它未在grid-template-areas中进行指定。

我们使用.grid-item:not([grid-area])选择器来选择未指定grid-area属性的.grid-item元素，并将其display属性设置为none，从而将其隐藏起来。这样，额外的.grid-item元素就会被隐藏。

使用visibility: hidden属性隐藏元素

除了使用display: none属性来隐藏元素外，我们还可以使用visibility: hidden属性将元素隐藏起来。与display: none不同的是，使用visibility: hidden属性隐藏的元素仍然占据空间，只是不可见而已。

.grid-item:not([grid-area]) {
  visibility: hidden;
}

在这个示例中，我们使用与前面相同的选择器来选择未指定grid-area属性的.grid-item元素。然后，我们将这些元素的visibility属性设置为hidden，从而将其隐藏起来。

下面是一个完整的示例，演示了如何使用visibility: hidden属性隐藏未指定的元素。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Grid Hide Elements</title>
  <style>
    .grid-container {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: 100px 100px;
    }

    .grid-item {
      border: 1px solid black;
      padding: 10px;
    }

    .grid-item:nth-child(1) {
      grid-area: header;
    }

    .grid-item:nth-child(2) {
      grid-area: sidebar;
    }

    .grid-item:nth-child(3) {
      grid-area: content;
    }

    .grid-item:nth-child(4) {
      grid-area: footer;
    }

    .grid-item:not([grid-area]) {
      visibility: hidden;
    }
  </style>
</head>
<body>
  <div class="grid-container">
    <div class="grid-item">Header</div>
    <div class="grid-item">Sidebar</div>
    <div class="grid-item">Content</div>
    <div class="grid-item">Footer</div>
    <div class="grid-item">Extra</div>
  </div>
</body>
</html>

在上面的示例中，我们使用.visibility: hidden将未指定grid-area属性的.grid-item元素隐藏起来。与使用display: none不同的是，使用visibility: hidden属性隐藏的元素仍然保留其空间，只是不可见而已。