CSS 网格布局

上一页
下一页

CSS 网格布局是一个用于开发响应式网页的二维布局系统。在本教程中，我们将学习如何使用网格系统设计网页布局。

什么是网格布局？

网格布局用于通过在网页上提供 HTML 组件的响应式和灵活排列来增强所有用户设备上的用户体验。

网格非常适合创建网页的整体布局，而Flexbox主要用于对齐容器内的项目。

目录


 

网格元素

在网格布局系统中，我们有两个元素，网格容器和网格项目。

网格容器

网格容器定义了网格的外层元素，其中包含所有子元素。可以通过设置`display: grid`或`display: inline-grid`来定义网格容器。

网格项目

网格项目是网格容器内的所有直接元素。这些项目可以根据需要在 Flexbox 容器内垂直和水平排列。

CSS Grid Layout

显示网格属性

如果我们将 display 属性的值设置为`grid`或`inline-grid`，则 HTML 元素将成为网格容器。网格容器的所有直接子元素自动成为网格项目。

  • grid:此值定义块级网格容器，表示其行为类似于块元素，占用所有可用宽度。（类似于 div）
  • inline-grid:此值定义内联级网格容器，表示其行为类似于内联元素，占用与其内容一样宽的宽度。（类似于 span）

示例

以下示例显示了 grid 和 inline-grid 之间的区别。

<!DOCTYPE html>
<html lang="en">
<head>
   <style>
      .grid-container {
         display: grid;
         grid-template-columns: 1fr 1fr 1fr;
         gap: 10px;
         width: 100%;
         background-color: lightblue;
      }
      .inline-grid-container {
         display: inline-grid;
         grid-template-columns: 1fr 1fr 1fr;
         gap: 10px;
         background-color: lightgreen;
      }
      .grid-item {
         background-color: lightcoral;
         padding: 20px;
         text-align: center;
      }
   </style>
</head>

<body>
   <h3>Inline Grid Example</h3>
   <p>
         Here is an example of 
         <span class="inline-grid-container">
            <span class="grid-item">1</span>
            <span class="grid-item">2</span>
            <span class="grid-item">3</span>
         </span> 
         inline grid.
   </p>
   
   <h3>Grid Example</h3>
      <div class="grid-container">
      <div class="grid-item">1</div>
      <div class="grid-item">2</div>
      <div class="grid-item">3</div>
   </div>
</body>
</html>

网格行和列

在 CSS 中，我们可以定义布局中所需的列数和行数。每个单元格将代表一个网格项目。以下代码显示了如何在网格中定义行和列。

示例

在这个示例中，我们将创建两个网格布局，一个是用于行，另一个是用于列，每个网格都有行和列，但单独显示它们将帮助您理解行和列。

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .grid-container {
            display: grid;
            gap: 10px;
            padding: 10px;
            width: 75%;
        }
        .grid-item {
            background-color: #4CAF50;
            border: 1px solid #ddd;
            padding: 20px;
            text-align: center;
            font-size: 1.2em;
            color: white;
        }
        .row{
            grid-template-columns: 1fr;
            grid-template-rows: repeat(3, 1fr);
        }
        .column{
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: 1fr;
        }
    </style>
</head>
<body>
    <h1>Grid Layout Example</h1>
    <h3>Grid Rows - 3 Rows X 1 Column</h3>
    <div class="grid-container row">
      <div class="grid-item item1">
         Item 1
      </div>
      <div class="grid-item item2">
         Item 2
      </div>
      <div class="grid-item item3">
         Item 3
      </div>
    </div>
    
    <h3>Grid Columns - 1 Row X 3 Columns </h3>
    <div class="grid-container column">
      <div class="grid-item item1">
         Item 1
      </div>
      <div class="grid-item item2">
         Item 2
      </div>
      <div class="grid-item item3">
         Item 3
      </div>
    </div>
</body>
</html>

网格间隙

grid gap 属性用于在网格项目的行和列之间添加间隙。我们有三个与此相关的属性，`gap`、`column-gap`和`row-gap`。

gap属性可以为行和列设置相等的间隙，而`row-gap`和`column-gap`可以为行和列设置不同的间隙值。行值和列值比间隙值具有更高的优先级，因此，如果我们定义所有三个，则行值和列值将覆盖间隙值。

示例

在此示例中，我们尝试解释网格项目之间的间隙。

<!DOCTYPE html>
<html lang="en">
<head>
   <style>
      .grid-container {
         display: grid;
         grid-template-columns: 1fr 1fr 1fr;
         grid-template-rows: 100px 100px 100px;

         /* Sets both row and column gaps to 20px */
         gap: 20px; 
         /* Make gap between rows as 10px (override) */
         row-gap: 10px; 
         /* Make gap between columns as 5px (override) */
         column-gap: 5px; 
      }
      .grid-item {
         background-color: #4CAF50;
         border: 1px solid #ddd;
         padding: 20px;
         text-align: center;
         font-size: 1.2em;
         color: white;
      }
   </style>
</head>

<body>
    <h1>Grid Gap Example</h1>
    <div class="grid-container">
      <div class="grid-item">
         Item 1
      </div>
      <div class="grid-item">
         Item 2
      </div>
      <div class="grid-item">
         Item 3
      </div>
      <div class="grid-item">
         Item 4
      </div>
      <div class="grid-item">
         Item 5
      </div>
      <div class="grid-item">
         Item 6
      </div>
    </div>
</body>
</html>

CSS 网格线

在 CSS 中，可以根据网格单元格之间称为网格线的虚线来放置网格项目。列之间的线称为列线，行之间的线称为行线。

CSS Grid Lines

CSS 网格属性参考

以下是与网格相关的 CSS 属性列表

属性 值 示例
display 定义元素是网格容器还是内联网格容器。
gap 定义行和列之间的间隙。
grid-area 定义网格项目在网格布局中的位置和大小。
grid-column 控制网格项目在网格容器中列方向上的放置。
grid-row 控制网格项目在网格容器中行方向上的放置。
grid-template 指定网格列、网格行和网格区域。
grid-auto-columns 确定自动生成的网格列轨道的大小或此类轨道的模式。
grid-auto-rows 确定自动生成的网格行轨道的大小或此类轨道的模式。
grid-auto-flow 指定网格项目在网格中的排列。
打印页面
上一页
下一页
广告