CSS Grid Layout với Media Query

CSS Grid Layout với Media Query là tính năng mạnh mẽ để tạo các thiết kế đáp ứng sử dụng template area. Nó cho phép điều chỉnh linh hoạt vị trí nội dung trên nhiều kích thước màn hình khác nhau. Dễ dàng tích hợp cho thiết kế website dạng đáp ứng, module hoặc plugin, cách tiếp cận này đảm bảo bố cục linh hoạt phù hợp với cả môi trường desktop, mobile và các thiết bị khác.

HTML

CSS

.polydev-plugin-wordpress-container {
    max-width: 900px;
    margin: 0 auto;
    display: grid;
    grid-template-areas:
        "header header header header header header"
        "left before before before before right"
        "left main main main main right"
        "left after after after after right"
        "footer footer footer footer footer footer";
    grid-template-columns: 1fr 4fr 4fr 4fr 4fr 1fr;
    gap: 10px;
}

.header {
    grid-area: header;
    background-color: #a2d2ff;
    padding: 10px;
}

.left {
    grid-area: left;
    background-color: #ffafcc;
    padding: 10px;
}

.before {
    grid-area: before;
    background-color: #cdb4db;
    padding: 10px;
}

.main {
    grid-area: main;
    background-color: #bde0fe;
    padding: 10px;
}

.after {
    grid-area: after;
    background-color: #ffc8dd;
    padding: 10px;
}

.right {
    grid-area: right;
    background-color: #ffcad4;
    padding: 10px;
}

.footer {
    grid-area: footer;
    background-color: #d0f4de;
    padding: 10px;
}

@media screen and (max-width: 768px) {
    .polydev-plugin-wordpress-container {
        display: grid;
        grid-template-areas:
            "header"
            "before"
            "left"
            "main"
            "right"
            "after"
            "footer";
        grid-template-columns: 1fr;
    }
}

JavaScript

Preview: CSS Grid Layout với Media Query

<body>

@polyxgo

PolyXGO

HTML

CSS

JavaScript

Preview: CSS Grid Layout với Media Query

Về WikiPoly

Liên hệ

HTML

CSS

JavaScript

Preview: CSS Grid Layout với Media Query

Đăng nhập