纯CSS写一个微信群组布局

头像
welsen
     广东
    阅读 13 分钟

    前几天有个同事问我能不能写个微信群组布局，我想最简单的方式实现，就没有考虑使用javascript,于是就动手了，先看效果：
    布局图片

    以下是实现代码，保存到本地，直接在浏览器打开就能看了。顺便说一句，头像自适应，但行高会有问题，需要手动调整一下

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Group layout</title>

    <style>

        .grid_wrapper {
            font-size: 10px;
            display: flex;
            list-style: none;
            margin: 0;
            padding: 0;
            width: 40em;
            height: 40em;
            font-size: 10px;
            overflow: hidden;
            flex-wrap: wrap-reverse;
            box-sizing: border-box;
            background-color: #f0f0f0;
            justify-content: space-around;
            align-items: space-around;
            align-content: space-around;
        }

        .grid_item:nth-child(n+10){
            display: none;
        }

        /*initial style for every item*/
        .grid_item {
            flex: 0 0 45%;
            text-align: center;
            background-color: lightcyan;
            margin: 0;
            padding: 0;
            font-weight: bold;
            color: white;
        }

        .grid_item img {
            vertical-align: middle;
            width: 100%;
            height: 100%;
        }

        /*when only one*/
        .grid_item:only-child {
            background-color: gold;
            flex-basis: 100%;
            height: 100%;
            line-height: calc(100% * 2);
            font-size: 200px;
        }

        /*4 or less than 4 begine*/
        .grid_item:first-child:nth-last-child(2) {
            background-color: lightcoral;
            height: 45%;
            margin-left: calc((100% - 100% * 0.45 * 2) / 6);
            margin-top: 0;
            margin-right: 0;
        }

        .grid_item:nth-child(2):nth-last-child(1) {
            background-color: lightcoral;
            height: 45%;
            margin-right: calc((100% - 100% * 0.45 * 2) / 6);
        }


        .grid_item:first-child:nth-last-child(3) {
            margin-bottom: calc((100% - 100% * 0.45 * 2) / 6);
            margin-left: calc((100% - 100% * 0.45 * 2) / 6);
            height: 45%;
        }

        .grid_item:nth-child(2):nth-last-child(2) {
            margin-bottom: calc((100% - 100% * 0.45 * 2) / 6);
            margin-right: calc((100% - 100% * 0.45 * 2) / 6);
            height: 45%;
        }

        .grid_item:nth-child(3):nth-last-child(1) {
            margin-top: calc((100% - 100% * 0.45 * 2) / 6);
            height: 45%;
        }


        .grid_item:first-child:nth-last-child(4) {
            margin-bottom: calc((100% - 100% * 0.45 * 2) / 6);
            margin-left: calc((100% - 100% * 0.45 * 2) / 6);
            height: 45%;
        }

        .grid_item:nth-child(2):nth-last-child(3) {
            margin-bottom: calc((100% - 100% * 0.45 * 2) / 6);
            margin-right: calc((100% - 100% * 0.45 * 2) / 6);
            height: 45%;
        }

        .grid_item:nth-child(3):nth-last-child(2) {
            margin-top: calc((100% - 100% * 0.45 * 2) / 6);
            margin-left: calc((100% - 100% * 0.45 * 2) / 6);
            height: 45%;
        }

        .grid_item:nth-child(4):nth-last-child(1) {
            margin-top: calc((100% - 100% * 0.45 * 2) / 6);
            margin-right: calc((100% - 100% * 0.45 * 2) / 6);
            height: 45%;
        }
        /*4 or less than 4 end*/



        .grid_item:first-child:nth-last-child(5) {
            margin-left: calc((100% - 100% * 0.28 * 3) / 8);
            margin-bottom: calc((100% - 100% * 0.28 * 2 - ((100% - 100% * 0.28 * 3) / 8 * 6)) / 2 + (100% - 100% * 0.28 * 3) / 8);
            height: 28%;
            flex: 0 0 28%;
        }

        .grid_item:nth-child(2):nth-last-child(4) {
            margin-bottom: calc((100% - 100% * 0.28 * 2 - ((100% - 100% * 0.28 * 3) / 8 * 6)) / 2 + (100% - 100% * 0.28 * 3) / 8);
            height: 28%;
        }

        .grid_item:nth-child(3):nth-last-child(3) {
            margin-bottom: calc((100% - 100% * 0.28 * 2 - ((100% - 100% * 0.28 * 3) / 8 * 6)) / 2 + (100% - 100% * 0.28 * 3) / 8);
            margin-right: calc((100% - 100% * 0.28 * 3) / 8);
            height: 28%;
        }

        .grid_item:nth-child(4):nth-last-child(2) {
            margin-top: calc((100% - 100% * 0.28 * 2 - ((100% - 100% * 0.28 * 3) / 8 * 6)) / 2 + (100% - 100% * 0.28 * 3) / 8);
            margin-left: calc((100% - 100% * 0.28 * 2 - ((100% - 100% * 0.28 * 3) / 8 * 6)) / 2 + (100% - 100% * 0.28 * 3) / 8);
            height: 28%;
        }

        .grid_item:nth-child(5):nth-last-child(1) {
            margin-top: calc((100% - 100% * 0.28 * 2 - ((100% - 100% * 0.28 * 3) / 8 * 6)) / 2 + (100% - 100% * 0.28 * 3) / 8);
            margin-right:  calc((100% - 100% * 0.28 * 2 - ((100% - 100% * 0.28 * 3) / 8 * 6)) / 2 + (100% - 100% * 0.28 * 3) / 8);
            height: 28%;
        }



        .grid_item:first-child:nth-last-child(6) {
            margin-bottom: calc((100% - 100% * 0.28 * 2 - ((100% - 100% * 0.28 * 3) / 8 * 6)) / 2 + ((100% - 100% * 0.28 * 3) / 8));
            margin-left: calc((100% - 100% * 0.28 * 3) / 8);
            height: 28%;
            flex: 0 0 28%;
        }

        .grid_item:nth-child(2):nth-last-child(5) {
            margin-bottom: calc((100% - 100% * 0.28 * 2 - ((100% - 100% * 0.28 * 3) / 8 * 6)) / 2 + ((100% - 100% * 0.28 * 3) / 8 ));
            height: 28%;
        }

        .grid_item:nth-child(3):nth-last-child(4) {
            margin-bottom: calc((100% - 100% * 0.28 * 2 - ((100% - 100% * 0.28 * 3) / 8 * 6)) / 2 + ((100% - 100% * 0.28 * 3) / 8 ));
            margin-right: calc((100% - 100% * 0.28 * 3) / 8);
            height: 28%;
        }

        .grid_item:nth-child(4):nth-last-child(3) {
            margin-top: calc((100% - 100% * 0.28 * 2 - ((100% - 100% * 0.28 * 3) / 8 * 6)) / 2 + ((100% - 100% * 0.28 * 3) / 8 ));
            margin-left: calc((100% - 100% * 0.28 * 3) / 8);
            height: 28%;
        }

        .grid_item:nth-child(5):nth-last-child(2) {
            margin-top: calc((100% - 100% * 0.28 * 2 - ((100% - 100% * 0.28 * 3) / 8 * 6)) / 2 + ((100% - 100% * 0.28 * 3) / 8 ));
            height: 28%;
        }

        .grid_item:nth-child(6):nth-last-child(1) {
            margin-top: calc((100% - 100% * 0.28 * 2 - ((100% - 100% * 0.28 * 3) / 8 * 6)) / 2 + ((100% - 100% * 0.28 * 3) / 8 ));
            margin-right: calc((100% - 100% * 0.28 * 3) / 8);
            height: 28%;
        }


        .grid_item:first-child:nth-last-child(7) {
            margin-bottom: calc((100% - 100% * 0.28 * 3) / 8);
            margin-left: calc((100% - 100% * 0.28 * 3) / 8);
            height: 28%;
            flex: 0 0 28%;
        }

        .grid_item:nth-child(2):nth-last-child(6) {
            margin-bottom: calc((100% - 100% * 0.28 * 3) / 8);
            height: 28%;
            flex: 0 0 28%;
        }

        .grid_item:nth-child(3):nth-last-child(5) {
            margin-bottom: calc((100% - 100% * 0.28 * 3) / 8);
            margin-right: calc((100% - 100% * 0.28 * 3) / 8);
            height: 28%;
            flex: 0 0 28%;
        }

        .grid_item:nth-child(4):nth-last-child(4) {
            margin-left: calc((100% - 100% * 0.28 * 3) / 8);
            height: 28%;
            flex: 0 0 28%;
        }

        .grid_item:nth-child(6):nth-last-child(2) {
            margin-right: calc((100% - 100% * 0.28 * 3) / 8);
            height: 28%;
            flex: 0 0 28%;
        }

        .grid_item:nth-child(7):nth-last-child(1) {
            margin-top: calc((100% - 100% * 0.28 * 3) / 8);
            height: 28%;
            flex: 0 0 28%;
        }




        .grid_item:first-child:nth-last-child(8) {
            margin-bottom: calc((100% - 100% * 0.28 * 3) / 8);
            margin-left: calc((100% - 100% * 0.28 * 3) / 8);
            height: 28%;
            flex: 0 0 28%;
        }

        .grid_item:nth-child(2):nth-last-child(7) {
            margin-bottom: calc((100% - 100% * 0.28 * 3) / 8);
            height: 28%;
            flex: 0 0 28%;
        }

        .grid_item:nth-child(3):nth-last-child(6) {
            margin-bottom: calc((100% - 100% * 0.28 * 3) / 8);
            margin-right: calc((100% - 100% * 0.28 * 3) / 8);
            height: 28%;
            flex: 0 0 28%;
        }

        .grid_item:nth-child(4):nth-last-child(5) {
            margin-left: calc((100% - 100% * 0.28 * 3) / 8);
            height: 28%;
            flex: 0 0 28%;
        }

        .grid_item:nth-child(6):nth-last-child(3) {
            margin-right: calc((100% - 100% * 0.28 * 3) / 8);
            height: 28%;
            flex: 0 0 28%;
        }

        .grid_item:nth-child(7):nth-last-child(2) {
            margin-left: calc((100% - 100% * 0.28 * 2 - ((100% - 100% * 0.28 * 3) / 8 * 6)) / 2 + (100% - 100% * 0.28 * 3) / 8);
            margin-top: calc((100% - 100% * 0.28 * 3) / 8);
            height: 28%;
            flex: 0 0 28%;
        }

        .grid_item:nth-child(8):nth-last-child(1) {
            margin-right: calc((100% - 100% * 0.28 * 2 - ((100% - 100% * 0.28 * 3) / 8 * 6)) / 2 + (100% - 100% * 0.28 * 3) / 8);
            margin-top: calc((100% - 100% * 0.28 * 3) / 8);
            height: 28%;
            flex: 0 0 28%;
        }




        .grid_item:first-child:nth-last-child(9) {
            margin-bottom: calc((100% - 100% * 0.28 * 3) / 8);
            margin-left: calc((100% - 100% * 0.28 * 3) / 8);
            height: 28%;
            flex: 0 0 28%;
        }

        .grid_item:nth-child(2):nth-last-child(8) {
            margin-bottom: calc((100% - 100% * 0.28 * 3) / 8);
            height: 28%;
            flex: 0 0 28%;
        }

        .grid_item:nth-child(3):nth-last-child(7) {
            margin-bottom: calc((100% - 100% * 0.28 * 3) / 8);
            margin-right: calc((100% - 100% * 0.28 * 3) / 8);
            height: 28%;
            flex: 0 0 28%;
        }

        .grid_item:nth-child(4):nth-last-child(6) {
            margin-left: calc((100% - 100% * 0.28 * 3) / 8);
            height: 28%;
            flex: 0 0 28%;
        }

        .grid_item:nth-child(5):nth-last-child(5) {
            height: 28%;
            flex: 0 0 28%;
        }

        .grid_item:nth-child(6):nth-last-child(4) {
            margin-right: calc((100% - 100% * 0.28 * 3) / 8);
            height: 28%;
            flex: 0 0 28%;
        }

        .grid_item:nth-child(7):nth-last-child(3) {
            margin-left: calc((100% - 100% * 0.28 * 3) / 8);
            margin-top: calc((100% - 100% * 0.28 * 3) / 8);
            height: 28%;
            flex: 0 0 28%;
        }

        .grid_item:nth-child(8):nth-last-child(2) {
            margin-top: calc((100% - 100% * 0.28 * 3) / 8);
            height: 28%;
            flex: 0 0 28%;
        }

        .grid_item:nth-child(9):nth-last-child(1) {
            margin-right: calc((100% - 100% * 0.28 * 3) / 8);
            margin-top: calc((100% - 100% * 0.28 * 3) / 8);
            height: 28%;
            flex: 0 0 28%;
        }

        .grid_item:first-child:nth-last-child(n+10) {
            height: 28%;
            flex: 0 0 28%;
        }

        .grid_item:first-child:nth-last-child(n+2){
            line-height: calc(10em * 0.7 *  0.45);
            font-size: 6em;
        }

        .grid_item:first-child:nth-last-child(n+2) ~ li {
            flex-basis: 45%;
            height: 45%;
            line-height: calc(10em * 0.7 * 0.45);
            font-size: 6em;
        }

        .grid_item:first-child:nth-last-child(n+5){
            line-height: calc(10em * 0.7 *  0.28);
            font-size: 6em;
        }

        .grid_item:first-child:nth-last-child(n+5) ~ li {
            flex-basis: 28%;
            height: 28%;
            line-height: calc(10em * 0.7 * 0.28);
            font-size: 6em;
        }

        .grid_item:nth-child(1){
            background-color: gold;
        }
        .grid_item:nth-child(2){
            background-color: mediumpurple;
        }
        .grid_item:nth-child(3){
            background-color: lightpink;
        }
        .grid_item:nth-child(4){
            background-color: #6062e7;
        }
        .grid_item:nth-child(5){
            background-color: #71c1ea;
        }
        .grid_item:nth-child(6){
            background-color: hotpink;
        }
        .grid_item:nth-child(7){
            background-color: #ea6161;
        }
        .grid_item:nth-child(8){
            background-color: #ea61b8;
        }
        .grid_item:nth-child(9){
            background-color: #8961ea;
        }

    </style>
</head>
<body>
    <ul class="grid_wrapper">
        <li class="grid_item"></li>
        <li class="grid_item"></li>
        <li class="grid_item"></li>
        <li class="grid_item"></li>
        <li class="grid_item"></li>
        <li class="grid_item"></li>
        <li class="grid_item"></li>
        <li class="grid_item"></li>
        
    </ul>

    <button id="putone">put one</button>

    <script>
        let wrapper = document.getElementsByClassName("grid_wrapper")[0]
        let putone = document.getElementById("putone")
        wrapper.children[0].innerText = "\u{1F4A9}"
        wrapper.children[1].innerText = "\u{1F911}"
        wrapper.children[2].innerText = "\u{1F631}"
        wrapper.children[3].innerText = "\u{1F9D8}"
        wrapper.children[4].innerText = "\u{1F479}"
        wrapper.children[5].innerText = "\u{1F989}"
        wrapper.children[6].innerText = "\u{1F981}"
        wrapper.children[7].innerText = "\u{1F9D4}"
        wrapper.children[8].innerText = "\u{1F9E0}"

        putone.onclick = function() {
            debugger;     
            var li = document.createElement("li")
            li.setAttribute("class", "grid_item")

            wrapper.appenChild(li)

        }
    </script>
</body>
</html>
    csshtml前端
    welsen
    32 声望1 粉丝

    一般般先生

    « 上一篇
    js获取页面尺寸

    引用和评论

    推荐阅读
    头像
    腾讯新闻中心首页改版啦

    小蚊酱赞 11阅读 9.9k评论 7

    头像
    网页设计的垂直居中

    寒青赞 41阅读 5.2k评论 3

    头像
    CSS团队协作规范

    寒青赞 38阅读 7.4k

    头像
    100个React最佳实践小技巧

    夕水赞 25阅读 6.5k评论 4

    头像
    前端开发工具

    寒青赞 19阅读 5.2k

    头像
    开发插件集合

    寒青赞 14阅读 3.5k

    头像
    Javascript(turfjs)等值线图绘制

    舍瓦温赞 15阅读 22.5k评论 18

    0 条评论
    得票最新