grid测试

最新推荐文章于 2024-06-04 20:26:09 发布

爱lv行

最新推荐文章于 2024-06-04 20:26:09 发布

阅读量338

点赞数

分类专栏： css3

本文链接：https://blog.csdn.net/u013165804/article/details/78388792

版权

css3 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>grid</title>
</head>

<body>
    <div class="wrapper">
        <div class="letter">A</div>
        <div class="letter">B</div>
        <div class="letter">C</div>
        <div class="letter">D</div>
    </div>
</body>
<style type="text/css">
*,
html {
    margin: 0;
    padding: 0;
}

.wrapper {
    display: grid;
    grid-template-columns: 3fr 1fr 1fr;
    grid-template-rows: 1fr 3fr;
    grid-column-gap: 1px;
    grid-row-gap: 1px;
    background-color: black;
}

@media screen and (max-width: 800px) {
    .wrapper {

        grid-template-columns:  1fr 1fr 1fr;
    }
}

@media screen and (max-width: 500px) {
    .wrapper {
        grid-template-columns:  1fr 1fr;
    }
}



.letter {
    background-color: #0069b3;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    font-size: 70px;
    color: white;
    line-height: 1;
    font-family: 'hobeaux-rococeaux-background', Helvetica;
    font-weight: 200;
    cursor: pointer;
    transition: all .3s ease;
}
</style>

</html>