CSS Grid 网格布局

发表于 | 分类于 | 本文总阅读量 次

一、前言

在web页面开发中css允许我们控制页面中的元素位置，主要的布局样式由以下几种：

  • 正常布局流
  • display属性
  • 弹性盒子（Flexbox）
  • 网格（display: table）
  • 浮动 float
  • 定位 position
  • CSS Grid 网格布局
  • 多列布局（ Multi-column layout ）

每个技术都有各自优缺点，相辅相成，多掌握几种，在平时构建web页面更得心应手一些。本文主要介绍 CSS Grid 网格布局

二、什么是CSS Grid网格布局

CSS Grid 将网页划分成一个个网格，可以任意组合不同的网格，设计不同的布局。
Grid 布局则是将容器划分成”行”和”列”，产生单元格，然后指定”项目所在”的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大

（一）、基本概念

1.容器和项目
容器是指 网格布局的区域最外层
项目是容器内的子元素

<div class="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

2.行和列
容器内的水平区域为行（row），垂直区域为列（column）
3.单元格
行和列交叉的区域为单元格
4.网格线
划分网格的线成为网格线，n行m列，会有n+1根水平线 和 m+1根垂直线

（二）、容器属性

定义在容器上的属性

  • display属性
  • grid-template-columns grid-template-rows 属性
  • grid-row-gap grid-column-gap grid-gap 属性
  • grid-template-areas 属性
  • grid-auto-flow 属性

（三）、项目属性

定义在项目上的属性

  • grid-column-start grid-column-end grid-row-start grid-row-end 属性
  • grid-column grid-row 属性
  • grid-area 属性
  • justify-self align-self place-self 属性

参考文献：-CSS Grid 网格布局教程-阮一峰