Grid布局10大属性操作演示

10大属性

1、grid：创建grid容器
2、grid-template-rows/columns:显示网格单元
3、grid-area：将项目放到指定的网格单元中
4、grid-auto-flow：行与列的排序规则，默认是rows；
5、grid-auto-rows/columns：显示网格的行/列的大小
6、gap：行与列的间距，只写一个则第二个默认同第一个相同
7、place-content：所有项目在容器的对齐方式（容器元素）
8、place-items：所有项目在单元格的对齐方式（容器元素）
9、place-self：某个项目在网格单元中对齐方式（项目元素）
10、grid-row/column：行或列的跨越数量（项目元素）

图例效果

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grid布局容器框架</title>
    <link rel="stylesheet" href="grid.css">
</head>
<body>
<div class="main">
<div class="grd"></div>
</div>
    <!--
<style>
    /*
    1、创建grid
    2、划分网格单元
    */
    body * {
        outline: 1px solid rgb(221, 23, 23);
    }
    .nav{
        width: 30em;
        height: 30em;
        width: 40em;
        height: 50em;
        display: grid;
        background-color: rgb(209, 142, 142);
        grid-template-columns:repeat(3,10em);
        grid-template-rows: 10em 10em 10em;
        place-content: start start;
        place-content: center center;
        place-content: place-between;
    }
.nav .sa1{
    background-color: blueviolet;
    grid-row: 2 / 3;
    grid-column: 2 / 3;
    grid-row: 2 / 4;
    grid-column: 2 / 4;
    grid-row:2 / span 2;
    grid-column: 2 / span 2;
}
.nav .sad{
    width: 3em;
    height: 3em;
    background-color: blueviolet;
    place-items: center;
    place-content: content;
}
</style>
---->
</body>
</html>

CSS代码演示

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body * {
    outline: 1px solid rgb(27, 4, 4);
}
/*
1、创建grid
2、画格子
*/
.main{
height: 50em;
width: 50em;
    background-color: rgb(247, 211, 8);
    display: grid;
      /*
    grid-template-columns: 10em 10em 10em;
    grid-template-rows: 10em 10em 10em;
  创建格子简化用 repeat共2个参数 重复的次数，重复的值*/
    grid-template-rows: repeat(3,10em);
    grid-template-columns: repeat(3,10em);
    grid-auto-flow: column;
    grid-auto-flow: row;
    gap:5px 10px;
    gap:0px;
    place-content: center center;
    place-content: center start;
    place-content: start;
    place-content: end;
    place-content: space-between end;
    place-content: space-between;
    place-items: center;
    place-content: end;
    place-content: start;
    place-items: center;
    place-content: center center;
}
.main .grid:nth-of-type(3){
    place-self: end;
}
.main .grid{
    height: 5em;
    width: 5em;
    background-color: rgb(209, 178, 178);
 /*
    grid-row: 1 / 2;
    grid-column: 1 / 2;
    grid-row: 2 / 4;
    grid-column: 2 / 4;   
    grid-row-start: 2;
    grid-column-start: 2;
    grid-row-end: 1;
    grid-column-end:3;
    height: 5em;
    width: 5em;
    grid-area:直接定义网格区域
    有4个数值：行开始，列开始，行结束(跨越的行数)，列结束（跨越的列数）
     */
   /* grid-row: 3 / span 1;
    grid-column: 1 / span 3;  
    grid-area: 2 / 1 / span 1 /span 3; 
    新生成的项目，自动放入自动生产的单元格，并且与新单元格的宽度自适应
    gap 有行间距，列间距
    */
}

Grid布局10大属性操作演示

Grid布局10大属性操作演示

10大属性

图例效果

html

CSS代码演示

相关文章