grid实战作业

css 部分代码
我们使用了grid 布局
grid-template-columns: 属性负责把窗口进行表格化
gap 是负责把项目的间隙分开
<style>
body {
background-color: beige;
}

    body a {
        text-decoration: none;
        color: rgb(0, 255, 60);
        font-size: small;
    }
    a:hover {
        color: red;
    }
    .lastcenten {
        width: 1020px;
        border: 1px solid #000;
        margin: 0 auto;
    }
    /* 使用grid 布局 */
    .lastcenten .bodges {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 30px 10px;
    }
    .bodges .curse {
        overflow: hidden;
    }
    .lastcenten .bodges img {
        width: 100%;
        border-radius: 5px 5px 0 0;
    }
    .lastcenten .bodges img:hover {
        transform: scale(1.1);
        transition: all 0.3s;
    }
    .bodges .bodges_centent {
        background-color: #fff;
        border-radius: 0 0 5px 5px;
        padding: 15px;
    }
    .bodges_centent .title span {
        color: red;
        background-color: bisque;
        border-radius: 2px;
        padding: 3px 4px;
        text-align: center;
        font-size: x-small;
    }
    .bodges_centent .bodges_botton {
        display: flex;
        place-content: space-between;
        font-size: small;
        color: #aaa;
        margin-top: 10px;
        gap: 10px;
        padding: 2px;
    }
</style>
div 部分代码
<div class="lastcenten">
    <h2>最新课程</h2>
    <div class="bodges">
        <div class="curse">
            <a href="">
                <img src="https://img.php.cn/upload/course/000/000/068/6413e7ac3ce52126.jpg" alt="">
            </a>
            <div class="bodges_centent">
                <div class="title">
                    <span>中级 </span>
                    <a href="">php 编程从零到就业(2023 最新课程)</a>
                </div>
                <div class="bodges_botton">
                    <span>34345学习</span>
                    <span>收藏</span>
                </div>
            </div>
        </div>
    </div>

" class="reference-link">