使用css3的网格(Grid),做出瀑布流式布局

最新推荐文章于 2024-05-29 21:23:05 发布

麦兜:)

最新推荐文章于 2024-05-29 21:23:05 发布

阅读量4.4k

点赞数 1

分类专栏：前端开发文章标签： css3 html5

本文链接：https://blog.csdn.net/qq_40544291/article/details/104756199

版权

前端开发专栏收录该内容

36 篇文章 0 订阅

订阅专栏

效果如下:
在这里插入图片描述
关于Grid(网格) 布局,就看大神阮一峰的Grid 网格布局教程

效果的代码如下:
html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
    <div class="container">
        <div class="box">
            <div class="content">
                <img src="./img/abc.jpg" alt="">
                <p>Who strives not when he should strive, who, though young and strong, is given to idleness, who is loose in his purpose and thoughts, and who is lazy-that idler never finds the way to wisdom.</p>
            </div>
        </div>
        <div class="box">
            <div class="content">
                <img src="./img/abc.jpg" alt="">
                <p>Happy indeed we are without hate among the hateful.</p>
            </div>
        </div>
        <div class="box">
            <div class="content">
                <img src="./img/abc.jpg" alt="">
                <p>Without learning, men grow as cows do increasing only in flesh not wisdom.</p>
            </div>
        </div>
        <div class="box">
            <div class="content">
                <img src="./img/abc.jpg" alt="">
                <p>Be fond of sleep, fond of company, indolent, lazy and irritable-this is a cause of one’s downfall.</p>
            </div>
        </div>
        <div class="box">
            <div class="content">
                <img src="./img/abc.jpg" alt="">
                <p>One is one’s own refuge, who else could be the refuges？</p>
            </div>
        </div>
        <div class="box">
            <div class="content">
                <img src="./img/abc.jpg" alt="">
                <p>Cordial friendship has a supreme taste.</p>
            </div>
        </div>
        <div class="box">
            <div class="content">
                <img src="./img/abc.jpg" alt="">
                <p>Deed divides beings into lower and higher ones.</p>
            </div>
        </div>
    </div>
</body>
</html>

css代码如下:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    display: flex;
    justify-content: center;
    align-self: center;
    min-height: 100vh;
    background-color: #222;
}
.container {
    position: relative;
    max-width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-template-rows: minmax(100px, auto);
    margin: 40px;
    grid-auto-flow: dense;
    grid-gap: 10px;
}
.container .box {
    background-color: #333;
    padding: 20px;
    display: gird;
    font-size: 20px;
    place-items: center;
    text-align: center;
    color: #fff;
    transition: 0.5s;
}
.container .box:hover {
    background-color: #e91e63;
}
.container .box img {
    position: relative;
    max-width: 100px;
    margin-bottom: 10px;
}
.container .box:nth-child(1) {
    grid-column: span 2;
    grid-row: span 1;
}
.container .box:nth-child(2) {
    grid-column: span 1;
    grid-row: span 2;
}
.container .box:nth-child(4) {
    grid-column: span 1;
    grid-row: span 2;
}
.container .box:nth-child(5) {
    grid-column: span 3;
    grid-row: span 1;
}
@media (max-width: 991px) {
    .container {
        grid-template-columns: repeat(auto-fill, minmax(50%, 1fr));
        grid-template-rows: minmax(auto, auto);
    }
    .container .box {
        grid-column: unset !important;
        grid-row: unset !important;
    }
}

麦兜:)

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
使用css3的网格(Grid),做出瀑布流式布局

效果如下:关于网格grid,就看大神阮一峰的Grid 网格布局教程效果的代码如下:html代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,...
复制链接

扫一扫