Css 简明教程

CSS - Grid Layout

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

CSS Grid Layout is a two-dimensional layout system for developing responsive webpages. In this tutorial we will learn how to design a webpage layout using grid systems.

What is a Grid Layout?

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

Grid Layout used to enhance user experience over all the user devices by providing a responsive and flexible arrangement of HTML components over the webpage.

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

Grid is ideal for creating overall layout of a webpage, while flexbox is mostly used to align items inside a container.

Table of Contents

Grid Elements

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

In a grid layout system, we have two elements, Grid Container and Grid Item.

Grid Container

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

Grid container defines the outer element of grid, where all the child elements are present. A grid container can be defined by setting display: grid or display: inline-grid

Grid items

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

Grid items are all the direct elements inside grid container. This items can be arranged vertically and horizontally inside flexbox container based on need.

css grid

Display Grid Property

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

A HTML element become a grid container if we set value of display property as grid or inline-grid. All direct children of the grid container automatically become grid items.

  1. grid: This value defines block level grid container, means it behave like a block element taking full width available. ( Similar to div )

  2. inline-grid: This value defines inline level grid container, means it behave like a inline element taking as much width as it’s content. ( Similar to span )

Example

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

Following example show the difference between grid and 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>

Grid Rows and Columns

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

In CSS, we can define the number of columns and rows required in our layout. Each cell will represent a grid item. Following code shows how to define rows and columns in grid.

Example

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

In this example we will create two grid layout one is for row and another one is for column, each grid has row and column but showing them individually will help you to crack the rows and columns.

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

The grid gap properties are used to add gaps between rows and columns of grid items. We have three properties associated with this, gap, column-gap and row-gap.

  • gap* 属性可以为行和列设置相等的间隙，而 * row-gap* 和 * column-gap* 可以为行和列设置不同的间隙值。行值和列值优先于间隙值，所以如果我们定义所有三个，行值和列值将覆盖间隙值。

The gap property can set equal gap for both row and column, while row-gap and column-gap can set different gap values for row and column. Row value and column value have more preference over gap value, so if we define all three row value and column value will override over gap value.

Example

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

Here in this example we tried to explain the gap between grid items.

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

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

In CSS, Grid items can be placed according to the imaginary ines between grid cell called grid items. The lines between columns are called column lines and lines between rows are called row lines.

css grid lines

CSS Grid Properties Reference

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

Following is the list of CSS properties related to grid:

property

value

Example

display

Define whether an element is a grid container or an inline grid container.

Try It

gap

Defines the gap between rows and columns.

Try It

grid-area

Defines the location and size of the grid item within a grid layout.

Try It

grid-column

Control the placement of a grid item within the grid container in the column direction.

Try It

grid-row

Control the placement of a grid item within the grid container in the row direction.

Try It

grid-template

Specify the grid columns, grid rows and grid areas.

Try It

grid-auto-columns

Determines the size of automatically generated grid column tracks or a pattern of such tracks.

Try It

grid-auto-rows

Determines the size of automatically- generated grid rows tracks or a pattern of such tracks.

Try It

grid-auto-flow

Specifies arrangement of the grid item within the grid.

Try It