对齐网格项目与结束 - CSS

什么是网格？

网格布局（Grid Layout）是 CSS 中用来进行网格化布局的模块。通过将一个页面或一个组件拆分成一个网格，可以方便的对网格中的元素进行布局，使得布局更加稳定和容易被维护。

如何对齐网格项目？

在网格布局中，可以使用 justify-items 和 align-items 两个属性来对齐网格项目。

justify-items

justify-items 属性决定了网格项目在其包含的网格中沿着行轴方向的位置。它可以与 justify-content 属性协同工作来控制整个网格的对齐方式。

可以将 justify-items 设置为以下属性值：

• start：网格项目对齐网格区域的初始位置。
• end：网格项目对齐网格区域的结束位置。
• center：网格项目水平居中。
• stretch：网格项目填满整个网格区域。
• baseline：网格项目基准线对齐。

<div class="grid-container">
  <div class="item item1">1</div>
  <div class="item item2">2</div>
  <div class="item item3">3</div>
  <div class="item item4">4</div>
  <div class="item item5">5</div>
  <div class="item item6">6</div>
  <div class="item item7">7</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 100px);
  justify-content: center;
  justify-items: center;
}

.item {
  background-color: #ddd;
  border: 1px solid #333;
  padding: 20px;
  text-align: center;
}

上面的例子中设置了 justify-content: center 和 justify-items: center 来使得所有的网格项目都水平居中对齐。

align-items

align-items 属性决定了网格项目在其包含的网格中沿着列轴方向的位置。

可以将 align-items 设置为以下属性值：

• start：网格项目对齐网格区域的初始位置。
• end：网格项目对齐网格区域的结束位置。
• center：网格项目垂直居中。
• stretch：网格项目填满整个网格区域。
• baseline：网格项目基准线对齐。

<div class="grid-container2">
  <div class="item item1">1</div>
  <div class="item item2">2</div>
  <div class="item item3">3</div>
  <div class="item item4">4</div>
  <div class="item item5">5</div>
  <div class="item item6">6</div>
  <div class="item item7">7</div>
</div>

.grid-container2 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 100px);
  justify-content: center;
  justify-items: center;
  align-content: center;
  align-items: center;
}

.item {
  background-color: #ddd;
  border: 1px solid #333;
  padding: 20px;
  text-align: center;
}

上面的例子中设置了 align-content: center 和 align-items: center 来使得所有的网格项目都垂直居中对齐。

如何结束网格？

可以使用 grid-column-end 和 grid-row-end 来结束网格。如果 grid-column-end 没有设置，则网格项目会占据整个网格，直到下面的行或列截止。

<div class="grid-container3">
  <div class="item item1">1</div>
  <div class="item item2">2</div>
  <div class="item item3">3</div>
  <div class="item item4">4</div>
  <div class="item item5">5</div>
  <div class="item item6">6</div>
  <div class="item item7">7</div>
</div>

.grid-container3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 100px);
  justify-content: center;
  align-content: center;
}

.item {
  background-color: #ddd;
  border: 1px solid #333;
  padding: 20px;
  text-align: center;
}

.item2 {
  grid-row-end: span 2;
  grid-column-end: span 2;
}

上面的例子中设置了 .item2 的 grid-row-end: span 2 和 grid-column-end: span 2 来使得其占据两行两列的网格。

以上就是对齐网格项目与结束的介绍。

参考资料

• CSS Grid Layout