5分钟了解Grid布局的使用！！！超清晰_grid使用

Grid Container属性

开启网格布局 display

display: grid | inline-​grid;

划分行列 grid-template-columns

.cotainer{
grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];
grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line];
}

简写 repeat()

.container{
grid-template-columns: [col-start] 20px [col-start] 20px [col-start] 20px;
}
/可简写以上代码为如下代码/
.container{
grid-template-columns: repeat(3 [col-start] 20px);
}

等分 fr

.container{
grid-complate-columns: 1fr 1fr 1fr;
}

划分区域 grid-template-areas

• grid-area-name：由网格项grid-area指定的网格区域名称
• .点号：代表一个空的网格单元
• none：不定义网格区域

.container{
grid-template-columns: 50px 50px 50px 50px;
grid-template-rows: auto;
grid-template-areas:
“header header header header”
“main main . sidebar”
“footer footer footer footer”;
}

行、列间距 grid-gap

.container{
grid-template-columns: 100px 50px 100px;
grid-template-rows: 80px auto 80px;
grid-column-gap: 10px;
grid-rows-gap: 15px;
//简写 grid-gap: ;
//如果属性值只设置了一个值，则 grid-row-gap与 grid-column-gap 被设置为相同的值
}

所有网格单元内容的对其方式 place-items

.container{
place-items: align-items justify-items;
}

• 如果省略第二个值，则将第一个值同时分配给这两个属性
  

整个网格相对于容器的对其方式 place-content

.container{
place-content: align-content justify-content;
}
以justify-content的属性值为例：
start：网格与网格容器的左边/顶部对齐


end：网格与网格容器的右边/底部对齐


center：网格与网格容器的中间对齐


stretch：调整grid item 的大小，让宽度/高度填充整个网格容器


space-around：在 grid item 之间设置均等宽度/高度的空白间隙，其外边缘间隙大小为中间空白间隙宽度的一半


space-between：在 grid item 之间设置均等宽度/高度空白间隙，其外边缘无间隙

space-evenly：在每个 grid item 之间设置均等宽度/高度的空白间隙，包括外边缘

自动填充的单元格的宽度 grid-auto-columns

.container {
grid-template-columns: 60px 60px;
grid-template-rows: 90px 90px；
grid-auto-columns: 60px;
}
.item-a{
grid-column: 1 / 2;
grid-row: 2 / 3;
}
.item-b{
grid-column: 5 / 6;
grid-row: 2 / 3;
}

项目自动放置方式 grid-auto-flow

• row（默认值）：依次填充每行，根据需要添加新行
• column：依次填充每列，根据需要添加新列
• dense：填充在网格中较早的空缺

项目的属性 Grid Items

项目所占区域 grid-column-start

• line：可以是一个数字来指代相应编号的网格线，也可以使用名称指代相应命名的网格线
• span：网格项将跨越指定数量的网格轨道
• span：网格项将跨越一些轨道，直到碰到指定命名的网格线
• auto：自动布局，或者自动跨越，或者跨越一个默认的轨道

.item-b{
grid-column-start: 1;
grid-column-end: span col4-start;
grid-row-start: 2;
grid-row-end: span 2;
}

• 如果没有声明 grid-column-end / grid-row-end，默认情况下，该网格项将跨越1个轨道
• 网格项可以相互重叠，可以使用z-index来控制它们的堆叠顺序

简写 grid-column

.item-c{
grid-column: 3 / span 2;
grid-row: third-line / 4;
}

进一步简写 grid-area

• name：对区域的命名
• row-start / column-start/row-end>/ column-end：可以是数字，也可以是网格线的名字

.item-d{
grid-area: 1 / col4-start / last-line / 6;
}

单个网格项目内的对齐方式 place-content

属性值与之前的方式一样
.item-d{
place-content: | auto;
}


以上内容如有错误，请大家在评论区指正，谢谢支持，共同进步。 加油！！！
如果你感觉我写的内容对你有一定的帮助，请给我点一个 【赞】作为您对我的鼓励， 谢谢！！