第13章 1225-grid实战，学习心得、笔记

今天所学心得、笔记

1、网格单元和容器中对齐的相关属性全部实例演示

项目在网格单元中的对齐方式

<style>
    /*初始化*/
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    li {
        list-style: none;
    }
    .container {
        display: grid;
        border: 1px solid;
        width: 35em;
        height: 35em;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(4, 1fr);
        gap: .5em;
    }
    .container .item {
        width: 3.5em;
        height: 3.5em;
        border: 1px solid;
        background-color: pink;
        text-align: center;
        line-height: 3em;
    }
    /*项目网格对齐*/
    .container {
        /*左上角*/
        place-items: start start;
        /*右上角*/
        place-items: start right;
        /*左下角*/
        place-items: end left;
        /*右下角*/
        place-items: end right;
        /*正中*/
        place-items: center center;
        /*正中，简写*/
        place-items: center;
    }
    /*10号项目,单独上右对齐*/
    .container .item:nth-of-type(13),
    .container .item:nth-of-type(10),
    .container .item:nth-of-type(7),
    .container .item:nth-of-type(4)
    {
        place-self: start right;
    }
</style>

项目在网格容器中的对齐方式

<style>
    .container {
        width: 35em;
        height: 35em;
        border: 1px solid;
        display: grid;
        grid-template-columns: repeat(4, 5em);
        grid-template-rows: repeat(4, 5em);
        gap: .5em;
        /*项目在网格单元中对齐*/
        place-items: center;
    }
    .container .item {
        width: 3.5em;
        height: 3.5em;
        background-color: pink;
        text-align: center;
        line-height: 3.5em;
    }
    /*项目在网格容器中对齐*/
    .container {
        /*上左*/
        place-content: start left;
        place-content: start;
        /*上右*/
        place-content: start right;
        /*下左*/
        place-content: end left;
        /*下右*/
        place-content: end right;
        place-content: end;
        /*居中*/
        place-content: center;
        /*--------------------------------------------*/
        /*两端对齐*/
        place-content: space-between;
        /*元素上下左右，四边剩余空间相等*/
        place-content: space-around;
        /*剩余空间平均分配*/
        place-content: space-evenly;
        /*元素上下剩余空间相等，左右空间剩余平均分配*/
        place-content: space-around space-evenly;
    }
</style>

---

2、快速实现php.cn首页主要组件的布局

示例截图

" class="reference-link">

3、理解grid的媒体查询与专业的媒体查询有什么区别？

个人理解如下，不知对不对：
1、专业媒体查询，是通过系统监视浏览器窗口的大小，根据设定的阀值来调整html元素字号的大小，从而调整页面布局；
2、grid的媒体查询，是通过auto-fit属性，自适应调整“列”的数量，从而调整页面布局；