CSS - grid 属性

CSS grid 属性是一个简写属性，用于在一个声明中声明所有显式和隐式网格属性。这是一种定义元素网格布局的便捷且简洁的方法。grid 属性是以下各个网格相关属性的简写：grid-template-rows，grid-template-columns，grid-template-areas，grid-auto-columns，grid-auto-flow 和 grid-auto-rows

语法

grid: none| grid-template-rows / grid-template-columns | grid-template-areas | grid-template-rows / [grid-auto-flow] grid-auto-columns | [grid-auto-flow] grid-auto-rows / grid-template-columns | initial | inherit;

属性值

值	描述
none	表示不指定行或列的特定大小。默认值。
grid-template-rows / grid-template-columns	指定行数及其高度和列数及其宽度。
grid-template-areas	使用名称指定网格布局。
grid-template-rows / grid-auto-columns	指定行数及其高度和列的自动大小。
grid-auto-rows / grid-template-columns	指定行的自动大小和列数及其宽度。
grid-template-rows / grid-auto-flow grid-auto-columns	指定行数及其高度，自动放置项目的position和列的自动大小。
grid-auto-flow grid-auto-rows / grid-template-columns	指定如何放置自动放置的项目，行的自动大小，以及列数及其宽度。
initial	将属性设置为其初始值。
inherit	从父元素继承属性。

CSS Grid 属性示例

以下示例解释了具有不同值的grid 属性。

具有行高和列宽的 Grid 属性

要在网格布局中定义具有其大小的行和列，我们为行指定高度值，为列指定宽度值，并用 `/` 分隔（例如，10px 10px / 20px 20px 指定 2 行 10px 高度和 2 列 20px 宽度）到grid 属性。如下例所示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         display: grid;
         grid: 150px 100px/ auto auto auto;
         gap: 10px;
         background-color: lightblue;
      }

      .container>div {
         border: 2px solid gray;
         color: white;
         text-align: center;
         padding: 30px 0px;
         margin: 10px;
         background-color: lightcoral;
      }
   </style>
</head>

<body>
   <h2>
      CSS Grid Property
   </h2>
   <p>
      <strong>
         grid: 150px 100px / auto auto auto 
      </strong>; 
      There are two rows: first row's height is 150px,
      second row's height is 100px. There are three 
      columns: all colums have auto width, meaning
      they will be adjusted according to their 
      content.
   </p>
   <div class="container">
      <div>
         Item-1
      </div>
      <div>
         Item-2
      </div>
      <div>
         Item-3
      </div>
      <div>
         Item-4
      </div>
      <div>
         Item-5
      </div>
      <div>
         Item-6
      </div>
   </div>

</body>

</html>

具有网格模板区域的 Grid 属性

为了定义网格布局某些部分的大小，以便元素可以放置在这些部分中，我们为这些部分提供名称及其大小（例如，“header header content content”表示 2 行和 2 列）到grid 属性。如下例所示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         display: grid;
         grid: "header header header header" 100px
               "sidebar content content content" 100px
               "footer footer footer footer" 100px;
         padding: 10px;
         gap: 20px;
         background-color: lightblue;
      }

      .item1 {
         grid-area: header;
      }

      .item2 {
         grid-area: sidebar;
      }

      .item3 {
         grid-area: content;
      }

      .item4 {
         grid-area: footer;
      }

      .container>div {
         background-color: lightcoral;
         text-align: center;
         color: white;
         padding: 20px;
      }
   </style>
</head>

<body>
   <h2>
      CSS Grid Property
   </h2>
   <p>
      <strong>
         grid: "header header header header 100px
         sidebar content content content 100px
         footer footer footer footer 100px"
      </strong>; 
      There are three rows and four columns. The header
      is first row and takes four columns, sidebar and
      content are second row and take single column 
      and 3 columns respectively and footer is third
      column and takes all four columns. All rows 
      have 100px height.
   </p>
   <div class="container">
      <div class="item1">
         This is header
      </div>
      <div class="item2">
         This is sidebar
      </div>
      <div class="item3">
         This is content
      </div>
      <div class="item4">
         This is footer
      </div>
   </div>

</body>

</html>

支持的浏览器

属性
grid	57	16	52	10	44

css_properties_reference.htm

打印页面