CSS Grid 佈局

hotMemo發表於2024-11-09
CSS

HTML:

<body>
<div class="headTitle">常用的Grid佈局</div>
<div class="layout">
    <div class="box box1">box方塊</div>
    <div class="box">box方塊</div>
    <div class="box">box方塊</div>
    <div class="box">box方塊</div>
    <div class="box">box方塊</div>
    <div class="box">box方塊</div>
    <div class="box">box方塊</div>
    <div class="box">box方塊</div>
    <div class="box">box方塊</div>
    <div class="box">box方塊</div>
    <div class="box">box方塊</div>
</div>
</body>

CSS:
<style>
    .headTitle {
        text-align: center;
        color: #555;
        font-size: 26px;
        padding: 30px 0;
    }

    .layout {
        border-radius: 10px;
        margin: 0 auto;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
        padding: 30px;
        display: grid;
        /*grid-template-columns: 1fr 2fr 1fr 1fr;*/ 一行4個 按比例劃分寬度
        /*grid-template-columns: repeat(5, 1fr);*/ 一行5個 平均分
        /*grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));*/ 自動分配寬度，響應式佈局 最小每個260px 然後平分
        grid-template-columns: repeat(5, 1fr); // 一行5個
        gap: 30px;
        height: 400px;
    }

    .layout .box {
        /*height: 200px;*/
        /**/
        background-color: #FFCF7F;
        border-radius: 8px;
        padding: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
    }

    .layout .box1 { // 第一個塊
        grid-row: 1/3; // row 第一條邊到第三條邊
        grid-column: 1/3; // coloumn 第一條邊到第三條邊
    }
</style>





相關文章