CSS 格子layout例子

feellikelearning July 4, 2022 0 Comments

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 複製黏貼到編輯器里，出了還是一個一行，打橫顯示是瀏覽器的特效。