grid布局

最新推荐文章于 2024-05-22 01:02:41 发布

暮白.

最新推荐文章于 2024-05-22 01:02:41 发布

阅读量162

点赞数

文章标签：前端 javascript

本文链接：https://blog.csdn.net/2201_75585337/article/details/131912155

版权

基础概念

两个横向网格线之间的是行轨道

两个纵向网格线之间的是列轨道

容器触发网格

display : grid ; 存在兼容性问题
display : inline-grid ;

设置行列

跟几组值，就代表几行几列
/* grid-template-rows: 100px 100px 100px; */
片段划分：fr
grid-template-rows: 1fr 3fr 1fr;
grid-template-rows: 20% 30% 50%;

/* grid-template-columns: 100px 200px 100px; */
grid-template-columns: 1fr 1fr 1fr;

/* 取值重复函数 repeat(num1,num2) num1:重复次数 num2:重复的数值*/
grid-template-columns: repeat(5, 1fr);
/* 自动填充用10%进行划分，划分不下来，不在划分 */
grid-template-columns: repeat(auto-fill, 10%);

网格之间的间距

/* row-gap: 20px; */
/* column-gap: 20px; */

gap: 20px 40px;

给网格添加项目

添加对应的div

调整显示顺序：

grid-auto-flow:row/colimn;

项目对齐方式

水平对齐方式：justify-items

垂直对齐方式: align-items

网格位于容器的对齐方式

justify-content:start\center\end\space-around……

align-content

项目属性

简写：grid-row：start/end；

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father {
width: 300px;
height: 400px;
border: 1px solid black;
margin: 0 auto;
display: grid;
grid-template-rows: repeat(4, 100px);
grid-template-columns: repeat(3, 100px);
}

.father>div {
background-color: pink;
border: 2px solid rgb(58, 57, 56);
}

.box1 {
grid-row-start: 1;
grid-row-end: 3;
grid-column-start: 2;
grid-column-end: 4;
}

.box7 {
grid-row-start: 4;
grid-row-end: 5;

grid-row: 4/5;


grid-column-start: 1;
grid-column-end: 3;
}
</style>
</head>

</html>

案例

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 1200px;
height: 430px;
border: 2px solid black;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(11, 100px);
grid-template-rows: repeat(4, 100px);
gap: 10px;
}

.box>div {
background-color: pink;
}

.box8 {
grid-row: 1/2;
grid-column: 8/10;
}

.box9 {
grid-row: 2/3;
grid-column: 1/3;
}

.box10 {
grid-row: 1/2;
grid-column: 10/12;
}

.box13 {
grid-row: 2/4;
grid-column: 5/7;
}

.box19 {
grid-row: 3/5;
grid-column: 1/3;
}
</style>
</head>