浅析 CSS Grid 布局(上)一、基本定义1.1什么是Grid布局原本的Flex布局是轴线布局，所以Flex布局有

一、基本定义

1.1 什么是Grid布局

原本的Flex布局是轴线布局，所以Flex布局有主轴和辅轴的概念，其只能针对于某一个项目进行轴向的布局，所以

Flex布局可以被认为是一维布局

Grid布局将容器划分为行和列，随后可以根据项目所在的单元格进行布局，所以Grid布局可以看出是一个二维布局，

1.2 常见的布局方式

传统布局方式

position+ display+float

特点：兼容性是最好的，但是布局繁琐，效率低
Flex布局

特点：具有自己的一套特别的属性，使用效率高，兼容性强
网格布局（grid布局）

特点：是目前最为强大的布局方式，比Flex布局灵活，但是兼容性没有Flex布局好

兼容性参照： Can I use css-grid

二、核心概念

容器和项目

容器（container）

设置了display:grid的哪一个盒子

项目（item）

grid布局中的每一个元素项

核心概念

整个容器中存在内容的部分就是内容（content）

每一个单元格，每一个行或者列，每一个区域都是一个项目（item）

可以任意将多个单元格组合为一个组，这个组就是区域(area)

在Grid布局中，每一个item之间，都是有网格线存在的，这些网格线都是不可见的，主要作用是用来定位和布局

三、 Grid初体验

index.html

<div class="main">
    <div class="item item-1">item1</div>
    <div class="item item-2">item2</div>
    <div class="item item-3">item3</div>
    <div class="item item-4">item4</div>
    <div class="item item-5">item5</div>
    <div class="item item-6">item6</div>
    <div class="item item-7">item7</div>
    <div class="item item-8">item8</div>
    <div class="item item-9">item9</div>
    <div class="item item-10">item10</div>
</div>

grid.css(部分代码)

.main {
  width: 600px;
  height: 600px;
  border: 5px solid skyblue;
  display: grid;
}

结果

可见直接设置了display，界面上并不会起什么作用

需要设grid-template-*来结合一起使用，才会有效果

浅析 CSS Grid 布局(上)

一、 基本定义