10分钟了解Grid布局

 

 

 

<div>
  <div><p>1</p></div>
  <div><p>2</p></div>
  <div><p>3</p></div>
</div>

最外层的<div>元素就是容器，内层的三个<div>元素就是项目。

设为网格布局以后，容器子元素（项目）的float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效。

一、容器属性

1、grid-template-columns，grid-template-rows

grid-template-columns属性定义每一列的列宽，

grid-template-rows属性定义每一行的行高，

fr关键字，表示比例关系。

.container {
    display: grid;
    height: 300px;
    width: 500px;
    background-color: #abca8a;
    /*grid-template-columns: 1fr 1fr 50px 2fr;*/
    grid-template-columns:  repeat(2, 1fr);
    grid-template-rows: 70% 30%;
    /* grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];  指定网格线名称r1... */ 
}

2、grid-row-gap，grid-column-gap

grid-row-gap属性设置行与行的间隔（行间距），grid-column-gap属性设置列与列的间隔（列间距）。

3、grid-auto-flow

子元素默认的放置顺序是"先行后列"，可以将它设成column，变成"先列后行"。

4、justify-items，align-items，place-items 

justify-items属性设置单元格内容的水平位置（左中右），align-items属性设置单元格内容的垂直位置（上中下）。

.container {
  justify-items: start | end | center | stretch;
  align-items: start | end | center | stretch;
}

• start：对齐单元格的起始边缘。
• end：对齐单元格的结束边缘。
• center：单元格内部居中。
• stretch：拉伸，占满单元格的整个宽度（默认值）。

justify-content是整个内容区域在容器里面的水平位置（左中右），align-content是整个内容区域的垂直位置。

grid-auto-columns属性和grid-auto-rows属性用来设置，浏览器自动创建的多余网格的列宽和行高。

二、子项属性

1、grid-column-start ，grid-column-end ，grid-row-start ，grid-row-end 

表示grid子项所占据的区域的起始和终止位置，包括水平方向和垂直方向。

2、justify-self，align-self

用法和容器属性justify-items等相似。

三、圣杯布局

圣杯布局指的是一个网页由页眉，3等高列（2个固定侧栏和中心内容主体）和贴在页面底部的页脚组成。

 

.container {
    display: grid;
    padding: 5px;
    width: 500px;
    grid-template-areas: "one one one"
                            "two three four"
                            "five five five";
    grid-template-columns: 120px auto 120px;
    gap: 20px 20px;
}

.child {
    padding: 8px;
    box-shadow: 0 2px 5px 0 rgba(52, 47, 51, .63);
    /*color用于设置字体颜色，而background-color同于设置背景颜色。*/
    color: red;
    background-color: pink;
    text-align: center;
    opacity: .9;
    font-size: 20px;
}

.one {
    /*子项只要使用grid-area属性指定其隶属于那个区域*/
    grid-area: one;
}

.two {
    grid-area: two;
}

.three {
    grid-area: three;
}

.four {
    grid-area: four;
}

.five {
    grid-area: five;
}

---

Grid布局则适用于更大规模的布局（二维布局），而Flexbox布局最适合应用程序的组件和小规模布局（一维布局）。

参考文档：https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Grid_Layout/

辅助网站：https://jsbin.com/