Css 简明教程

CSS - Grid Layout

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

What is a Grid Layout?

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

网格是创建网页整体布局的理想选择，而 * flexbox* 主要用于对容器内的项目进行对齐。

Grid Elements

在网格布局系统中，我们有 Grid Container 和 Grid Item. 两个元素。

Grid Container

网格容器定义网格的外部元素，其中存在所有子元素。可以设置 display: grid 或 display: inline-grid 来定义网格容器。

Grid items

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

Display Grid Property

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

grid: 该值定义了块级网格容器，这意味着它将像块元素一样行为，占据可用的全部宽度（类似于 div）。
inline-grid: 这个值定义内联网格容器，这意味着它像一个内联元素，占据与它的内容一样多的宽度。（类似于跨度）

Example

以下示例显示了网格和内联网格之间的差异

<!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>

Grid Rows and Columns

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

Example

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

<!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* 可以为行和列设置不同的间隙值。行值和列值优先于间隙值，所以如果我们定义所有三个，行值和列值将覆盖间隙值。

Example

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

<!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>