Grid网格布局（补充中......）

小钟要长高

已于 2023-02-28 16:40:08 修改

阅读量176

点赞数

文章标签：前端 css

于 2023-02-22 18:14:39 首次发布

本文链接：https://blog.csdn.net/q515518/article/details/129167852

版权

Grid网格布局

（我画了一个图，便于更好理解网格布局，有亿点点潦草）
在这里插入图片描述

row line:	行线
column line:	列线
track:	网格轨道，行与行或列与列之间的区域
gap:	网格间距，
cell:	网格单元格
area:	网格区域，由一个或多个单元格组成

`一、属性`

display: grid;
display: inline-grid;
grid-template-columns: 80px 100px 90px;	将容器设为三列，每列的列宽依次为80、100、90px
grid-template-rows: 90px 90px 90px;	容器设为三行，每列的行高是100px
grid-template-areas: ‘a a a’ ‘b b b’ ‘c c c’;	定义区域名称，
grid-template	上面三个属性的合并形式
grid	多个属性合并（不建议使用）
grid-row-gap: 10px;	行与行的间隔
grid-column-gap: 20px;	列与列的间隔
grid-gap	上面两个属性的合并写法，也可以简写为gap
justify-content
align-content
place-content
grid-template-columns: repeat(3, 100px);	分为3列，每列100px
grid-template-columns: repeat(auto-fit, 200px);	自适应，每列200px
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));	自适应列数，每列最小100px
grid-template-columns: repeat(3, 1fr);	3列，每列宽度相同
grid-template-columns: 100px 1fr 2fr;	第一列100px，剩余空间按 1 : 2 的比例分给第二、第三列
grid-template-columns: 100px auto;	第一列100px，第二列宽度为剩余空间
grid-template-columns: 1fr 1fr minmax(200px, 2fr);	前两列宽度相同，最后一列是常规下是第一列的二倍，最小 200px
grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];	设置网格线名为[c1]、[c2]
grid-auto-columns: 50px 50px 50px;	位置超出定义列数时的宽度，
grid-auto-rows: 50px 50px 50px;	位置超出定义行数时的高度
grid-auto-flow	容器的子元素会排列顺序: row"先行后列"、 column"先列后行"、 row dense 和 column dense
grid-column-start: 1;	左边框所在的垂直网格线
grid-column-end: 2;	/右边框所在的垂直网格线
grid-row-start: 1;	上边框所在的水平网格线
grid-row-end: 2;	下边框所在的水平网格线
grid-column: 1 / 2;	grid-column-start和grid-column-end的合并简写形式也可以结合网格线和span关键字
grid-row:1 / 2;	grid-row-start属性和grid-row-end的合并简写形式也可以结合网格线和span关键字
grid-area: a	指定项目放在哪一个区域由容器上的grid-template-area划分区域
justify-self: start	end
align-self: start	end
place-self: ;	// align-self属性和justify-self属性的合并简写形式

`二、举个栗子`

1、

在这里插入图片描述

.container {
  display: grid;
  grid-template-columns: 150px auto 150px;/*第一列150px 第二列自动 第三列150px*/
  grid-gap: 1em;/*空隙*/
}
header, footer {
  grid-column: 1 / 4;/*是grid-column-start和grid-column-row的合并写法*/
}
header,
aside,
article,
footer {
  background: #1a4a65;
  color:white;
  display: grid;
  place-content: center;/*align-content和justify-content的合并写法*/
  height: 17vh;
}
@media all and (max-width: 700px) {
  aside,
  article {
    grid-column: 1 / 4;
  }
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>栗子</title>
</head>
<body>
<div class="container">
  <header>
    栗子1
  </header>
  <aside>
    栗子2
  </aside>
  <article>
    栗子3
  </article>
  <aside>
    栗子4
  </aside>
  <footer>
    栗子
  </footer>
</div>
</body>
</html>

2、

在这里插入图片描述

.parent {
	display: grid;
	grid-template: 100px 100px 100px / 100px 100px 100px;
	gap: 10px;/* 网格间距*/
}
.item {
  border: 1px solid #999;
}
.a{
  grid-column: 1/3;/*第一条先开始，第三条线结束*/
  grid-row: 1/2;
  background:yellow;
}
.b{
  grid-column: 2/3;
  grid-row: 2/3;/*第二条先开始，第三条线结束*/
  background:#758493;
}
.c{
  grid-column: 3/4;
  grid-row: 3/4;
  background:#55fd11;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class="parent">
  <div class="item a">1</div>
  <div class="item b">2</div>
  <div class="item c">3</div>
</div>
</body>
</html>

3、

在这里插入图片描述

#container{
	display: grid;
    grid-template-columns: repeat(auto-fill, 100px);
    /*自适应， 每列100px*/
    grid-template-rows:100px 100px 100px;  /*行高100px*/
    grid-auto-rows: 50px 50px 50px;  /*位置超出定义行数时的高度*/
    justify-content: space-between;  /**/
	gap: 10px;

}
.item{
  background:yellow;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>自适应</title>
</head>
<body>
<div id="container">
  <div class="item">a</div>
  <div class="item">b</div>
  <div class="item">c</div>
  <div class="item">d</div>
  <div class="item">e</div>
  <div class="item">f</div>
  <div class="item">g</div>
  <div class="item">h</div>
  <div class="item">i</div>
  <div class="item">g</div>
  <div class="item">j</div>
  <div class="item">k</div>
</div>
</body>
</html>