之前我们讲过flex布局在实际项目中开发，今天我们来看看另一个新布局grid——网格布局
用过UI框架的童鞋一定对网格布局不陌生，大部分UI框架里都有。element layout布局、ant design grid布局
本次介绍只会介绍一些常用属性
容器属性
- grid布局
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
<style>
.container{
display: grid;
}
style>
head>
<body>
<div class="container">
<span>1span>
<span>2span>
<span>3span>
<span>4span>
<span>5span>
<span>6span>
<span>7span>
<span>8span>
<span>9span>
div>
body>
html>
复制代码打开chrome调试我们看到
也可以变成行内 display:inline-grid
- grid-template-columns && grid-template-rows
1.grid-template-columns定义列属性
.container{
display: grid;
grid-template-columns: 100px 100px 100px;
}
复制代码2.grid-template-rows定义行属性
.container{
display: grid;
grid-template-rows: 100px 100px 100px;
}
复制代码grid-template-columns && grid-template-rows相关其他属性
(1).宽度高度可以使用百分比
.container {
display: grid;
grid-template-columns: 33.33% 33.33% 33.33%;
grid-template-rows: 33.33% 33.33% 33.33%;
}
复制代码(2).repeat() 使用repeat()可以少些重复的宽高 例如：
.container {
display: grid;
grid-template-columns: repeat(3, 33.33%);
grid-template-rows: repeat(3, 33.33%);
}
复制代码重复的值可以是多个数值
grid-template-columns: repeat(2, 100px 20px 80px);
复制代码将多个元素看成一个整体 (3).fr 关键字 类似于vw、vh 1vw为宽度的1% 1r可以看做是50%
- grid-gap grid-gap为网格之间的宽度 grid-gap属性是grid-column-gap和grid-row-gap的合并简写形式
grid-gap: ;
复制代码 .container {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-gap: 20px 20px;
}
复制代码- grid-template-areas 可以通过自命名来规定每行块
.container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
grid-template-areas: 'a b c'
'd e f'
'g h i';
}
复制代码上面的写法grid-template-areas里的内容名称可随便定义，可以相同，每行不限于个数
.container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
grid-template-areas: 'a a a a'
'd d d d'
'g g g g';
}
复制代码需要注意的是grid-template-columns和grid-template-rows定义时个数如果大于grid-template-areas定义每列的个数，会显示grid-template-columns定义的个数
.container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
grid-template-areas: 'a a'
'd d'
'g g';
}
复制代码- grid-auto-flow
排列的顺序，默认row先行再列，column先列后行
.container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
grid-template-areas: 'a a a'
'd d d'
'g g g';
grid-auto-flow: column;
}
复制代码-
place-items place-items为
justify-items和align-items缩写 对齐方式 1.justify-items 一个内元素水平位置 2.align-items 一个内元素垂直位置 -
place-content
place-items为justify-content和align-content缩写
- justify-content grid块在容器的水平位置
- justify-content grid块在容器的垂直位置
内部属性
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
<style>
.container {
display: grid;
}
.item{
}
style>
head>
<body>
<div class="container">
<span class="item">1span>
<span>2span>
<span>3span>
<span>4span>
<span>5span>
<span>6span>
<span>7span>
<span>8span>
<span>9span>
div>
body>
html>
复制代码- item定在网格哪个网格
grid-column-start属性：左边框所在的垂直网格线 grid-column-end属性：右边框所在的垂直网格线 grid-row-start属性：上边框所在的水平网格线 grid-row-end属性：下边框所在的水平网格线
.item {
grid-column-start: 2;
grid-column-end: 4;
}
复制代码span关键词 表示占几个网格
.item {
grid-column-start: span 2;
}
复制代码- grid-area
放在哪个区域（非常好用）
.container {
display: grid;
grid-template-areas: 'a b c'
'd e f'
'g h i'
}
.item{
grid-area: e
}
复制代码- place-self
place-self是align-self属性和justify-self属性的缩写
- justify-self 单格内容水平位置
- align-self 单格内容垂直位置
.container {
display: grid;
grid-template-areas: 'a b c'
'd e f'
'g h i'
}
.item{
grid-area: e;
place-self: center center;
}
复制代码一些常用的属性，大致学习了一遍，项目中使用更多的还是看文档比较全面
CSS Grid 网格布局教程 —— 阮一峰