CSS Grid：如何实现叠层布局？-JavaScript中文网-JavaScript教程资源分享门户

CSS Grid 是一个强大的布局系统，它为前端开发人员提供了多种布局选项。其中叠层布局是一种非常流行的布局，本文将介绍如何使用 CSS Grid 实现叠层布局。

叠层布局的基础

叠层布局是指多个元素在同一位置重叠排布的布局方式。在实现叠层布局时，需要使用 position 属性设置元素的定位方式。常用的定位方式有 relative 和 absolute。

relative 定位方式是相对于原来的位置进行移动，不会脱离文档流，且不会影响其他元素的位置。
absolute 定位方式是相对于其父元素进行定位，会脱离文档流，所以需要设置父元素的 position 为 relative 或 absolute。

接下来，我们将通过实例来演示如何使用 CSS Grid 实现叠层布局。

实现叠层布局的步骤

以下是实现叠层布局的步骤。

步骤 1：创建 HTML 结构

首先，我们需要定义一些 HTML 元素，并赋予它们不同的类名。

<div class="wrapper">
   <div class="box box1"></div>
   <div class="box box2"></div>
   <div class="box box3"></div>
   <div class="box box4"></div>
</div>

步骤 2：设置样式

接下来，我们需要使用 CSS Grid 来设置元素的布局。

// www.javascriptcn.com code example
.wrapper {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   grid-template-rows: repeat(2, auto);
   gap: 20px;
   height: 500px;
}

.box {
   position: relative;
   border: 2px solid black;
   border-radius: 10px;
   overflow: hidden;
}

.box1 {
   grid-column: 1 / span 2;
   grid-row: 1 / span 2;
   height: 100%;
}

.box2 {
   grid-column: 1 / span 1;
   grid-row: 2 / span 1;
}

.box3 {
   grid-column: 2 / span 1;
   grid-row: 1 / span 1;
}

.box4 {
   grid-column: 2 / span 1;
   grid-row: 2 / span 1;
}

这段代码中，我们使用 display: grid 创建一个网格布局。grid-template-columns 和 grid-template-rows 属性定义了网格布局的行和列。我们使用 repeat() 函数来定义每一行和列的数量，并且使用 1fr 作为单位满足整个父元素。gap 属性用于指定网格中元素之间的空隙。

之后，我们为 .box 元素设置一些基础样式，包括边框、圆角和溢出等样式。

接着，我们为每个 .box 元素设置不同的网格区域。可以分别设置 grid-column 和 grid-row 属性来定义它们的位置和大小。对于 .box1 元素，我们设置它覆盖了整个父元素的四个角。对于 .box2 和 .box3，我们将它们放在不同的行和列中，而 .box4 则位于右下角。

最后，我们的网格布局就完成了。

步骤 3：添加内容

最后，我们可以使用图片或其他内容来填充每个 .box 元素。

// www.javascriptcn.com code example
.box1 {
   background-image: url("https://picsum.photos/1200/800");
   background-size: cover;
}

.box2 {
   background-color: #2196f3;
}

.box3 {
   background-color: #4caf50;
}

.box4 {
   background-color: #f44336;
}

我们使用 background-image 和 background-color 属性设置每个 .box 元素的背景样式。

示例代码

以下是完整的 CSS Grid 叠层布局示例代码。

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
   <head>
      <title>CSS Grid 叠层布局</title>
      <style>
         .wrapper {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-template-rows: repeat(2, auto);
            gap: 20px;
            height: 500px;
         }

         .box {
            position: relative;
            border: 2px solid black;
            border-radius: 10px;
            overflow: hidden;
         }

         .box1 {
            grid-column: 1 / span 2;
            grid-row: 1 / span 2;
            height: 100%;
            background-image: url("https://picsum.photos/1200/800");
            background-size: cover;
         }

         .box2 {
            grid-column: 1 / span 1;
            grid-row: 2 / span 1;
            background-color: #2196f3;
         }

         .box3 {
            grid-column: 2 / span 1;
            grid-row: 1 / span 1;
            background-color: #4caf50;
         }

         .box4 {
            grid-column: 2 / span 1;
            grid-row: 2 / span 1;
            background-color: #f44336;
         }
      </style>
   </head>
   <body>
      <div class="wrapper">
         <div class="box box1"></div>
         <div class="box box2"></div>
         <div class="box box3"></div>
         <div class="box box4"></div>
      </div>
   </body>
</html>

以上就是使用 CSS Grid 实现叠层布局的详细步骤和示例代码。通过使用 CSS Grid，我们可以轻松地实现复杂的布局，并为我们的网页添加更好的视觉效果。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67cfd2e6e46428fe9ebe90e9

CSS Grid：如何实现叠层布局？