• 主页

  • 投资

  • IT

    🔥

  • 设计

  • 销售

  • 人

  • 共240篇

    前端 - HTML5

关闭

返回栏目

关闭

返回前端 - HTML5栏目

197 - 布局技术 - 网格布局 - 网格项目的属性

作者：

贺及楼

成为作者

更新日期：2025-02-27 18:03:32

前端 - HTML5 《布局技术 - 网格布局 - 网格项目的属性》

在前端开发中，网格布局（Grid Layout）是 HTML5 引入的一种强大的布局模型，它能够轻松创建二维网格容器和项目。除了网格容器的属性，网格项目也有一系列独特的属性，这些属性可以帮助我们更精确地控制网格项目在网格中的位置、大小和对齐方式。下面我们就来详细介绍网格项目的属性。

1. grid-column-start、grid-column-end、grid-row-start 和 grid-row-end

这四个属性用于指定网格项目在网格中的位置。grid-column-start 和 grid-column-end 控制项目在列方向上的起始和结束位置，grid-row-start 和 grid-row-end 控制项目在行方向上的起始和结束位置。

示例代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <style>
  8.    .grid-container {
  9.       display: grid;
  10.       grid-template-columns: repeat(3, 100px);
  11.       grid-template-rows: repeat(3, 100px);
  12.       gap: 10px;
  13.     }
  15.    .grid-item {
  16.       background-color: lightblue;
  17.       border: 1px solid black;
  18.     }
  20.    .item1 {
  21.       grid-column-start: 1;
  22.       grid-column-end: 3;
  23.       grid-row-start: 1;
  24.       grid-row-end: 2;
  25.     }
  26.   </style>
  27. </head>
  29. <body>
  30.   <div class="grid-container">
  31.     <div class="grid-item item1">Item 1</div>
  32.     <div class="grid-item">Item 2</div>
  33.     <div class="grid-item">Item 3</div>
  34.     <div class="grid-item">Item 4</div>
  35.     <div class="grid-item">Item 5</div>
  36.     <div class="grid-item">Item 6</div>
  37.     <div class="grid-item">Item 7</div>
  38.     <div class="grid-item">Item 8</div>
  39.     <div class="grid-item">Item 9</div>
  40.   </div>
  41. </body>
  43. </html>

在这个例子中，.item1 从第一列开始，到第三列结束，从第一行开始，到第二行结束，因此它会跨越两列。

简写形式

可以使用 grid-column 和 grid-row 来简写上述属性。例如：

  1. .item1 {
  2.   grid-column: 1 / 3;
  3.   grid-row: 1 / 2;
  4. }

2. grid-area

grid-area 是一个更强大的简写属性，它可以同时设置 grid-row-start、grid-column-start、grid-row-end 和 grid-column-end。

示例代码

  1. .item1 {
  2.   grid-area: 1 / 1 / 2 / 3;
  3. }

这里的顺序是 grid-row-start / grid-column-start / grid-row-end / grid-column-end。

3. justify-self 和 align-self

justify-self 用于控制项目在网格单元格内的水平对齐方式，align-self 用于控制项目在网格单元格内的垂直对齐方式。

取值

属性 取值 描述
justify-self start 项目左对齐
end 项目右对齐
center 项目居中对齐
stretch 项目拉伸以填充单元格（默认值）
align-self start 项目顶部对齐
end 项目底部对齐
center 项目垂直居中对齐
stretch 项目拉伸以填充单元格（默认值）

示例代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <style>
  8.    .grid-container {
  9.       display: grid;
  10.       grid-template-columns: repeat(2, 100px);
  11.       grid-template-rows: repeat(2, 100px);
  12.       gap: 10px;
  13.     }
  15.    .grid-item {
  16.       background-color: lightblue;
  17.       border: 1px solid black;
  18.     }
  20.    .item1 {
  21.       justify-self: center;
  22.       align-self: center;
  23.     }
  24.   </style>
  25. </head>
  27. <body>
  28.   <div class="grid-container">
  29.     <div class="grid-item item1">Item 1</div>
  30.     <div class="grid-item">Item 2</div>
  31.     <div class="grid-item">Item 3</div>
  32.     <div class="grid-item">Item 4</div>
  33.   </div>
  34. </body>
  36. </html>

在这个例子中，.item1 在单元格内水平和垂直都居中对齐。

4. place-self

place-self 是 align-self 和 justify-self 的简写属性，顺序是 align-self / justify-self。

示例代码

  1. .item1 {
  2.   place-self: center center;
  3. }

总结

网格项目的属性为我们提供了丰富的控制手段，让我们能够更加灵活地布局网页。通过合理运用这些属性，我们可以创建出各种复杂而美观的布局。希望本文对你理解网格项目的属性有所帮助，快去实践一下吧！