使用 CSS Grid 实现带圆角的网格布局效果-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，实现网格布局是非常常见的需求。而最近比较流行的网格布局实现方式是使用 CSS Grid。而若要实现带圆角的网格布局，则需要对 CSS Grid 做一些特殊的处理。本文将详细介绍如何使用 CSS Grid 实现带圆角的网格布局效果，并提供示例代码以供学习参考。

CSS Grid 简介

CSS Grid 是一种基于二维网格的布局方式。它可以实现灵活的、多列多行的网格布局。相比传统布局方式，使用 CSS Grid 可以更为高效地实现复杂的布局需求，并且不需要复杂的计算和类库依赖。

CSS Grid 的基本概念包括容器和网格单元格。容器是被声明为 display: grid 的元素，它的直接子元素就是网格单元格。我们可以通过设置容器的属性来定义网格布局的行数、列数、行高、列宽等参数。

实现带圆角的网格布局

在实现带圆角的网格布局时，我们需要重点考虑两个问题。第一个是如何给整个容器设置圆角；第二个是如何让单元格之间的分割线受圆角影响。下面将详细介绍这两个问题的解决方案。

给容器设置圆角

要给整个容器设置圆角，我们可以使用 css3 的 border-radius 属性。但是当我们在容器上设置了 border-radius 属性后，由于网格单元格默认会沿用容器的边框，我们就会得到一个带有圆角边框和直角单元格内部的网格布局。此时我们需要对网格单元格做特殊处理，将其里面的边框改为圆角的效果。

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
  border-radius: 20px;
  overflow: hidden; /* 关键点 */
}

如上代码所示，我们在容器上设置了 overflow: hidden，这样就可以控制单元格的边框在圆角处截断，从而形成带圆角的单元格。但是在真正的实现中，需要配合一些其他的样式来优化效果。

让单元格分割线受圆角影响

在上面的解决方案中，我们已经成功实现了带圆角的网格布局外观。但是你会发现，单元格之间的分割线并没有受到圆角的影响，还是直角。此时我们需要对单元格内部的元素做一些特殊处理，将分割线也改为圆角的效果。

// javascriptcn.com 代码示例
<div class="container">
  <div class="item">
    <div class="content">1</div>
    <div class="top"></div>
    <div class="left"></div>
    <div class="right"></div>
    <div class="bottom"></div>
  </div>
  <div class="item">
    <div class="content">2</div>
    <div class="top"></div>
    <div class="left"></div>
    <div class="right"></div>
    <div class="bottom"></div>
  </div>
  <div class="item">
    <div class="content">3</div>
    <div class="top"></div>
    <div class="left"></div>
    <div class="right"></div>
    <div class="bottom"></div>
  </div>
  <div class="item">
    <div class="content">4</div>
    <div class="top"></div>
    <div class="left"></div>
    <div class="right"></div>
    <div class="bottom"></div>
  </div>
  <div class="item">
    <div class="content">5</div>
    <div class="top"></div>
    <div class="left"></div>
    <div class="right"></div>
    <div class="bottom"></div>
  </div>
  <div class="item">
    <div class="content">6</div>
    <div class="top"></div>
    <div class="left"></div>
    <div class="right"></div>
    <div class="bottom"></div>
  </div>
</div>

// javascriptcn.com 代码示例
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
  border-radius: 20px;
  overflow: hidden;
  position: relative; /* 关键点 */
}

.item {
  background-color: #eee;
  position: relative; /* 关键点 */
}

.item .content {
  position: relative; /* 关键点 */
  z-index: 1; /* 关键点 */
}

.item .top, .item .bottom, .item .left, .item .right {
  position: absolute;
  background-color: #fff;
  z-index: 2; /* 关键点 */
}

.item .top {
  left: 0;
  top: -10px;
  width: 100%;
  height: 10px;
  border-radius: 10px 10px 0 0;
}

.item .bottom {
  left: 0;
  bottom: -10px;
  width: 100%;
  height: 10px;
  border-radius: 0 0 10px 10px;
}

.item .left {
  top: 0;
  left: -10px;
  height: 100%;
  width: 10px;
  border-radius: 10px 0 0 10px;
}

.item .right {
  top: 0;
  right: -10px;
  height: 100%;
  width: 10px;
  border-radius: 0 10px 10px 0;
}

如上代码所示，我们在每个单元格内部新增了四个 div 元素，用于模拟分割线的圆角效果。需要注意的是，这四个元素的 z-index 属性需要高于单元格内部的内容，这样才可以保证分割线在内容上方。

总结

本文介绍了如何使用 CSS Grid 实现带圆角的网格布局效果。在实现的过程中，需要对单元格进行特殊的处理，以使分割线能够受到圆角的影响。这种技巧可以用于多种不同的布局需求，希望读者们掌握后能够广泛应用到自己的工作或学习中。

完整代码：https://codepen.io/jayson1998/pen/KKWerdE

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65838a2cd2f5e1655de6a4b2