关于css布局的记录(二) --网格布局
网格布局
学习来自阮一峰老师的教程网格布局和网络上的一些资料的学习
1、定义：
顾名思义，网格布局是将页面按行(row)和列(column)划分成一个个网格来进行布局
使用方法：display:grid || inline-grid来定义一个容器为网格布局
在定义网格布局的容器里面的display：table-ceil,float，vertical-align等设置会失效
示例图：
2、容器属性：
- grid-template-columns: 定义每一列的列宽
- grid-template-rows: 定义每一行的行高
注意： repeat：定义重复列宽或行高 fr：定义的属性值，代指片段宽度， 2fr为1fr的两倍宽，还有auto-fill关键字,minmax()方法，auto关键字等属性
- grid-row-gap: 定义行与行之间的间距
- grid-column-gap: 定义列与列之间的间距
- grid-gap: grid-row-gap grid-column-gap
- grid-auto-flow: 定义项目的排列顺序，row(默认值，先行后列) column(先列后行) row||column + dense(类似于浮动，尽量贴紧)
- justify-items: 定义项目中的水平位置，值：start（左） | end（右） | center（中） | stretch（默认，拉升）;
- align-items:定义项目中的垂直位置，值：start（左） | end（右） | center（中） | stretch（默认，拉升）;
- place-items: justify-items align-items
- justify-content: 是整体（全部）项目在容器中的水平位置，值：start | end | center | stretch | space-around | space-between | space-evenly
- align-content :是整体（全部）项目在容器中的垂直位置，值与justify-content相同
- place-content: justify-content align-content
- grid-auto-columns 与 grid-auto-columns 对自动创建的多余网格设置列宽和行高
3、项目属性：
grid-column||row-start||end 定位项目从哪个网线开始或截止
grid-column: grid-column-start / grid-column-end 的简写 grid-row与之一样
justify||align-self ：设置单个项目的水平或垂直位置（不是全部，只设置一个）
place-self: jsutify-self align-self 简写
实例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<style>
.main{
/*
grid: 默认为块元素
inline-grid: 默认为行内块元素
*/
display:grid;
width:400px;
height:150px;
/* 定义列宽,定义多少个就分成多少列
注意没定义行高，实际中会跟据项目自动分配行高（自动填充==默认值导致（stretch等））、
grid-template-columns: 100px 100px 100px; == repeat(3,100px);
grid-template-columns: 100px 100px 100px; == repeat(3,1fr);
*/
grid-template-columns: 100px 100px 100px;
grid-row-gap: 10px;
grid-column-gap: 10px;
justify-items: stretch;
}
.left{
background-color:lightcoral;
/* justify-self: left; */
}
.contain{
background-color:limegreen;
}
.right{
background-color:lightskyblue;
}
</style>
<body>
<!-- <span>1111</span> -->
<div class="main">
<div class="left">1</div>
<div class="contain">2</div>
<div class="right">3</div>
<div class="right">4</div>
<div class="left">5</div>
<div class="contain">6</div>
</div>
<!-- <span>2222</span> -->
</body>
</html>
总结：
不行了，看完脑子太乱了，这些语法还是等以后，做个实战来加深记录吧~~
关于学习到的一些记录与知识总结
