CSS 网格线

CSS 网格线提供了强大的布局框架，用于 Web 设计，它能够精准控制元素的排列和对齐。这些网格线既包括行，也包括列，它们提供了一个有序的框架，方便设计出复杂且灵活的布局。开发人员可以使用预定义的模板，轻松设置内容并调整其大小和方向以适配不同的屏幕。

CSS 网格线通过提高灵活性并避开复杂的定位 hack，有助于提升代码的可维护性。该适应性工具允许设计师创造美观且动态的界面，彻底改变了 Web 布局的思考和执行方式。

示例

我们来看以下示例，我们将把一个网格项目放置在第 2 列上，并使其在第 4 列结束。

Open Compiler
<!DOCTYPE html>
<html>
<head>
   <style>
      body {
         font-family: verdana;
         color: #7D3C98;
         text-align: center;
      }
      .tp {
         display: grid;
         grid-template-columns: auto auto;
         gap: 15px;
         background-color: #D5F5E3;
         padding: 15px;
      }
      .tp>div {
         background-color: #DE3163;
         text-align: center;
         padding: 10px 10px;
         font-size: 25px;
         color: #FDFEFE;
      }
      .x2 {
         grid-column-start: 2;
         grid-column-end: 4;
      }
   </style>
</head>
<body>
   <h2>Grid Lines</h2>
   <div class="tp">
      <div class="x1">1</div>
      <div class="x2">2</div>
      <div class="x3">3</div>
      <div class="x4">4</div>
      <div class="x5">5</div>
      <div class="x6">6</div>
   </div>
</body>
</html>

当我们运行以上代码后，它将在网页上生成一个输出，包括一个 div 框。

示例

再来看另一个场景，我们将把一个网格项目放置在第 2 行上，并使其在第 5 行结束。

Open Compiler
<!DOCTYPE html>
<html>
<head>
   <style>
      body {
         font-family: verdana;
         color: #1E8449;
         text-align: center;
      }
      .tp {
         display: grid;
         grid-template-columns: auto auto;
         gap: 15px;
         background-color: #FCF3CF;
         padding: 15px;
      }
      .tp>div {
         background-color: #CCD1D1;
         text-align: center;
         padding: 10px 10px;
         font-size: 25px;
         color: #DE3163;
      }
      .x2 {
         grid-row-start: 2;
         grid-row-end: 5;
      }
   </style>
</head>
<body>
   <h2>Grid Lines</h2>
   <div class="tp">
      <div class="x1">1</div>
      <div class="x2">2</div>
      <div class="x3">3</div>
      <div class="x4">4</div>
      <div class="x5">5</div>
      <div class="x6">6</div>
   </div>
</body>
</html>

运行以上代码后，输出窗口将会弹出，在网页上显示一个 div 框。

更新于：08-Jan-2024

996 浏览

开启你的职业生涯

完成课程获得认证

开始学习
广告