CSS 格子layout例子

.container { display: grid; grid-template-columns: 25% 25% 25% 25%; padding: 5%; border: 2px solid blue; } .inner { padding: 5%; border: 1px solid green; }

1

2

3

4

5

6

7

CSS代码

.container {
    display: grid;
    grid-template-columns: 25% 25% 25% 25%;
    padding: 5%;
    border: 2px solid blue;
}

.inner {
    padding: 5%;
    border: 1px solid green;
}

HTML代码

<div class="container">
    <div class="inner">
        1
    </div>

    <div class="inner">
        2
    </div>

    <div class="inner">
        3
    </div>

    <div class="inner">
        4
    </div>

    <div class="inner">
        5
    </div>

    <div class="inner">
        6
    </div>

    <div class="inner">
        7
    </div>
</div>

• padding是div内部内容和div格子上下左右边界的距离
• display: grid 决定了内部div (“inner” class)从左到右排练，如果不用，每个div各占一行
• grid-template-columns 决定了一行放几个内部div，和每个内部div宽度，可以是%也可以绝对距离
• boarder用来debug，显示格子边界大小
• 用鼠标选中格子里两行，cmd+c，cmd+v 复制黏贴到编辑器里，出了还是一个一行，打横显示是浏览器的特效。