css 网格布局_在CSS网格布局中移动项目[指南]

随着越来越多的浏览器开始支持 CSS Grid Layout Module，在Web设计中使用CSS Grid Layout Module变得越来越可行。 但是，在创建填充网格单元的布局时，可能需要片刻才能实现更复杂的功能。

例如，您可能想在卡在其网格区域中的某些网格项周围稍微移动 。 您可能还想将它们移出网格容器 （溢出），或移到彼此之间 （重叠），或者只是……移到周围的一些空白处。

因此，在本文中，我将向您展示当您使用CSS网格布局模块时如何移动，排序，溢出，重叠和调整网格项目的大小 。

创建一个CSS网格

首先，让我们创建一个具有一行三列的简单CSS网格。

在HTML中，我们创建了一堆div，其中网格容器包含三个网格项 。

<div class='grid-container'>
  <div class='grid-left'></div>
  <div class='grid-center'></div>
  <div class='grid-right'></div>
</div>

在CSS中，网格容器display: grid; 属性和网格项目具有grid-area ，用于标识网格项目区域的名称。

我们还将grid-template-areas属性添加到网格容器中，其中网格区域名称用于将网格区域分配给它们表示的网格单元 。

所有列的大小都是容器宽度的一分之一 （ fr ） ，从而确保了网格项的容纳。

.grid-container {
  display: grid;
  grid-template-areas: 'left center right';
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 80px;
  grid-gap: 5px;
  width: 360px;
  background-color: magenta;
}
.grid-left {
  grid-area: left;
}
.grid-center {
  grid-area: center;
}
.grid-right {
  grid-area: right;
}
.grid-container div {
  background-color: lightgreen;
}

溢出网格项目

如果需要布局，可以使网格项目溢出其网格容器 。 要实现溢出效果，您只需要使用其他列大小即可 ：

.grid-container {
  display: grid;
  grid-template-areas: 'left center right';
  grid-template-columns: repeat(3, 150px);
  grid-gap: 5px;
}

重叠网格项目

在以下情况下，一个网格项目可以重叠 （全部或部分覆盖） 另一个网格项目 ：

1. 它被设置为跨越（并覆盖）另一个网格项目的单元格。
2. 它的大小已增加，使其与附近的网格项重叠。
3. 它已移到另一个网格项目的顶部。

稍后，我们将在“大小调整”和“移动”部分中讨论第二和第三种情况。

首先，让我们看看第一种情况，即网格项跨越另一个网格项。

中心的网格项目已跨过左侧项目，因此屏幕上仅可见两个项目。

.grid-center {
  grid-area: center;
  grid-column: 1 / 3;
}

在下图中，您可以看到grid-column: 1 / 3 CSS规则的工作原理：中心列跨在网格线1和3之间 。 结果，中心列与左列重叠。

移动网格项目

通过移动，我的意思是稍微移动项目 。 如果您完全想将一个项目重新放置到另一个网格单元/区域中，建议您更新网格创建代码。

移动网格项很简单。 只需使用margin ， transform或position:relative; 属性 。 参见下文，如何使用这些属性移动项目。

可以通过以下方式移动中央和右侧网格项目（如上所示）：

1.使用

负边距会增加网格项目的尺寸，而正边距会修剪它们。 通过将两者结合使用，可以随意移动网格项目。

.grid-center {
  grid-area: center;
  margin-left: -10px;
  margin-right: 10px;
  margin-top: -10px;
  margin-bottom: 10px;
}
.grid-right {
  grid-area: right;
  margin-left: 10px;
  margin-right: -10px;
  margin-top: -10px;
  margin-bottom: 10px;
}

2.使用

translate() CSS函数沿x和y轴移动元素 。 将其与transform属性一起使用，可以更改网格项目的位置。

.grid-center {
  grid-area: center;
  transform: translate(-10px, -10px);
}
.grid-right {
  grid-area: right;
  transform: translate(10px, -10px);
}

3.使用

使用position: relative; 具有指定的top ， bottom ， left和right属性的规则也可以用于在网格项之间移动。

.grid-center {
  grid-area:  center;
  position: relative;
  bottom: 10px;
  right: 10px;
}
.grid-right {
  grid-area: right;
  position: relative;
  bottom: 10px;
  left: 10px;
}

订购网格项目

网格项以它们在HTML源代码中出现的顺序显示在屏幕上。

在上一部分中，将中心项向左移动时，浏览器将其置于左项的顶部。 发生这种情况是因为在HTML中， <div class='grid-center'>紧随<div class='grid-left'> ，因此中心项在左项之后（并在其上方）呈现 。

但是，我们可以使用z-index或order CSS属性更改订单网格项 。

使用z-index: 1; 规则，左侧网格项目具有较高的堆叠上下文 。

.
grid-left{
  grid-area: left;
  z-index: 1;
}

与在CSS网格布局模块中一样，更改HTML 中的元素顺序不会影响网格布局 ，您也可以在HTML 中的 <div class='grid-left'>之前放置<div class='grid-center'> 。 但是，只有在更新HTML代码不会损害可访问性的情况下，才这样做。

调整网格项目的大小

如果对网格项目使用自动调整大小的行或列（使用auto ， fr和gr单位），则只有 在未通过transform或负数调整大小的相邻项目时，它才会缩小以为其相邻的项目腾出空间保证金 。

请记住，在我们的示例网格中，所有三列都占网格容器的一分之一（ fr ）。 看一下左侧的项目以两种不同的方式调整大小后所有三个项目的外观。

1.

在这里，我们使用width和height属性更改左侧项目的大小。 结果，它停留在网格容器内。

.grid-left {
  grid-area: left;
  width: 200px;
  height: 90px;
}

2.

在这里，我们使用transform属性更改左侧项目的大小。 结果，它溢出了容器，栅格间隙也消失了。

.grid-left {
  grid-area: left;
  transform: scalex(1.8);
}

翻译自: https://www.hongkiat.com/blog/moving-css-grid-items/