grid 布局学习

grid 布局学习

grid-template-columns 设置列宽

// 设置表格为列宽为 100px 而且有三列
grid-template-columns: 100px 100px 100px;

// 设置表格行高为 200px 自动补齐
grid-template-rows: repeat(auto-fill, 200px);

grid-template-columns设置行高

grid中还有一个跟 flex: 1 差不多的 css样式, 就是 fr

// 表格列宽分别占表格的 1份，2份，3份
grid-template-columns: 1fr , 2fr , 3fr;
// 表格列表被平均分成 4份
grid-template-columns: repeat(3, 1fr);

minmax(min,max)函数 最大值跟最小值

//  第一列列宽占表格的一份，第二列列宽最小值为 100px 最大值为 表格的两份
grid-template-columns: 1fr minmax(100px, 2fr);

auto 属性

// 第一列宽为 200px 第二列为占满剩余宽度 第三列为200px
grid-template-columns: 200px auto 200px;

定义网格线

网格线，使用 [“自定义命名”] 定义网格线名称，方便以后给盒子定位使用.

grid-complate-cloumns: [g1] 100px [g2] 100px [g3] 100px [g4]

gap / column-gap / row-gap 间隔

设置里面单元格之间的间隔

gap = column-gap + row-gap; 混合属性
grid-template-gap: repeat(3,1fr);
// 列宽间距为 20px
cloumn-gap: 20px;
// 行高间距为 30px
row-gap:30px;

grid-template-areas 定义区域展示效果

// index.css   

	.grid-box {
        width: 1000px;
        height: 600px;
        display: grid;
		// 规定一片区域，并且按照想要的摆放顺序来展现
        // 区域的命名会影响到网格线，
        // 每个区域的起始网格线为 [区域名] + start
        // 终止网格线命名为 [区域名] + end
        grid-template-areas: "header header"
                             "nav main"
                             ". main"		// 不需要使用的区域用 "." 代替
                             "footer footer";

    }
                     
   .header {
   	 	// grid-area 指定区域为 header-start ~ header-end
        grid-area: header;
        background-color: red;
    }
    .nav {
   	 	// grid-area 指定区域为 header-nav ~ header-nav
        grid-area: nav;
        background-color: blue;
    }
    .main {
   	 	// grid-area 指定区域为 header-main ~ header-main
        grid-area: main;
        background-color: green;
    }
    .footer {
   	 	// grid-area 指定区域为 header-footer ~ header-footer
        grid-area: footer;
        background-color: pink;
    }

    // index.html

	<div class="grid-box">
       <div class="header">header</div>
       <div class="nav">nav</div>
       <div class="main">main</div>
       <div class="footer">footer</div>
   	</div>

代码展示效果

grid-auto-flow 设置容器里面的单元格放置顺序

默认的放置顺序的先行后列：grid-auto-flow: column; 

可以设置成先列后行： grid-auto-flow: row;

justify-items(水平方向对齐) / align-item(垂直方向对齐)

设置单元格内容的水平和垂直的对齐方式

display:grid;
justify-items:center;
align-items:center;

justify-content / align-content 项目水平对齐跟垂直对齐

设置整个内容区域（所有的项目的总和）的水平和垂直的对齐方式

justify-content: center;
align-content: center;

grid-auto-rows / grid-auto-coumns 规定多出来的表格的样式

grid-auto-columns: 100px;
/*grid-auto-rows: 100px;*/

grid-column-start / grid-column-end grid-row-start / grid-row-end

规定表格的区域位置，用来指定item的具体位置

grid-column-start: 1;
grid-column-end: 3;

========
grid-column: 1/3; // 相当于上面的简写
grid-column-start: 1;  // 设置开始的位置
grid-column-end: span 2; 	// 跨越两格

图片出处： csdn 默默花上开

gird-area 规定单元格区域

指定项目放在哪一个区域

   .grid-box {
        width: 1000px;
        height: 600px;
        display: grid;
        grid-template-areas: "header header"
                             "nav main"
                             ". main"
                             "footer footer";

    }
    .header {
        
        grid-area: header;
        background-color: red;
    }
    .nav {
        grid-area: nav;
        background-color: blue;
    }
    .main {
        grid-area: main;
        background-color: green;
    }
    .footer {
        grid-area: footer;
      

代码展示效果

grid-area 还是 grid-row-start / grid-column-start / grid-row-end / grid-column-end 的缩写形式

grid-area: 1/1/4/4;
相当于下面
grid-row-start: 1;
grid-column-start: 1;
grid-row-end: 4;
grid-column-end: 4;

justify-self / align-self / place-self 设置项目的单个属性的对齐方式

链接图片出处： CSDN 默默上花开

博客作者：CSDN zheng_jia_jun 完成时间 2022 / 7 / 10
转载请注明出处。