前端 | 两分钟掌握 css Grid 布局CSS Grid 布局是二维布局，可以同时控制行和列的排布和对齐方式。Gri

©design by HeyRain

两分钟掌握 css Grid 布局：

CSS Grid 布局是二维布局，可以同时控制行和列的排布和对齐方式。Grid 由水平线和垂直线构成，两条水平线中间的区域叫做行轨道，两条垂直线之间的区域叫做列轨道。

如何使用 Grid 布局：

给外层容器设置：

.grid {
    display: grid;
}

容器的直接子元素就会自动成为 Grid 布局的元素，例如一个容器包含 6 个子元素：

<div class="grid">
    <div class="column1">column1</div>
    <div class="column2">column2</div>
    <div class="column3">column3</div>
    <div class="column4">column4</div>
    <div class="column5">column5</div>
    <div class="column6">column6</div>
</div>

把它改成三列布局，可以使用grid-template-columns属性，指令每列的宽度。

可以是固定宽度：

.grid {
    display: grid;
    grid-template-columns: 100px 100px 100px;
}

也可以用fr指定浮动宽度，fr 是 Grid 布局专用单位，代表 Grid 剩余空间：

.grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;	//这里三列各占1/3
}

如果把第二列改成 2fr，则会占据 1/2 的空间：

.grid {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;	//第二列占据1/2，第一列和第三列各占1/4
}

给 grid 设置间距可以通过column-gap属性设置列间距，也可以通过row-gap设置行间距：：

.grid {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;	//第二列占据1/2，第一列和第三列各占1/4
    column-gap: 24px;	//列间距24px
    row-gap: 24px;		//行间距24px
}

或者使用gap属性统一设置：

.grid {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;	//第二列占据1/2，第一列和第三列各占1/4
    gap: 24px;	//间距24px
}

排列元素我们可以使用 grid-template-areas 属性。

比如有一个页面，头部和底部宽度占满全屏，侧边占 1/3，内容占 2/3：

<div class="layout">
    <header>头部</header>
    <aside>侧边栏</aside>
    <main>内容</main>
    <footer>底部</footer>
</div>

我们可以指定这样的区域：

  grid-template-areas:
    "header header header"
    "sidebar content content"
    "footer footer footer";

然后各个元素分别指定对应的区域：

header {
    grid-area: header;
}
aside {
    grid-area: sidebar;
}
main {
    grid-area: content;
}
footer {
    grid-area: footer;
}

Grid 对齐方式跟 flex-box布局类似，有水平方向的横轴和垂直方向的块轴。

在垂直方向上对齐子元素可以使用align-item属性，比如居中对齐：

.grid {
    align-items: center;		//居中对齐
    align-items: end;		//靠下对齐
}

在水平方向上对齐子元素可以使用justify-items属性，比如居中对齐：

.grid {
    justify-items: center;		//居中对齐
    justify-items: end;		//靠下对齐
    justify-items: space-between;		//两端对齐
}

如果行轨道和列轨道的尺寸小于 Grid 容器，还可以对轨道进行对齐。

在垂直方向上使用align-content属性：

.grid {
    align-content: center;		//垂直方向上居中对齐
    align-content: end;			//垂直方向上靠下对齐
}

在水平方向上使用justify-content属性：

.grid {
    justify-content: center;			//水平方向上居中对齐
    justify-content: end;				//水平方向上靠右对齐
    justify-content: space-between;		//水平方向上两端对齐
}

关于我

前端 | 两分钟掌握 css Grid 布局

©design by HeyRain

两分钟掌握 css Grid 布局：

推荐视频

关于我