css grid 网格属性

grid 是一个 CSS 所有网格容器的简写属性，可以用来设置以下属性：

显式网格属性： grid-template-rows、grid-template-columns 和 grid-template-areas。
隐式网格属性： grid-auto-rows、grid-auto-columns 和 grid-auto-flow。
间距属性： grid-column-gap 和 grid-row-gap。

属性值；

none : 默认值。不定义行或列的尺寸。
grid-template-rows / grid-template-columns : 设置列和行的尺寸。
grid-template-areas : 指定网格布局使用的网格项名称
grid-template-rows / grid-auto-columns : 指定行的尺寸（高度），以及列的自动尺寸。
grid-auto-rows / grid-template-columns : 指定行的自动尺寸，并设置 grid-template-columns 属性。
grid-template-rows / grid-auto-flow grid-auto-columns : 指定行的尺寸（高度），以及自动布局算法怎样运作，和列的自动尺寸。
grid-auto-flow grid-auto-rows / grid-template-columns : 指定自动布局算法怎样运作，和行的自动尺寸，以及设置 grid-template-columns 属性。
initial : 属性设置为默认值
inherit :从父原生继承该属性

实例：

<html>
<head>
<meta charset="utf-8"> 
<title>IT懒猫 www.catroom.com.cn</title>
<style>
.grid-container {
  display: grid;
  grid: 160px / auto auto auto;
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}
</style>
</head>
<body>

<h1>grid 属性</h1>

<p>grid 是一个 CSS 所有网格容器的简写属性</p>

<p>制作一个三列网格布局，并设置第一行高度为 160 像素：</p>

<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>  
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
</div>

</body>
</html>

效果：
grid效果

css grid 网格属性

推荐文章

catroom