CSS Grid Layout with Media Query

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,
.left,
.before,
.main,
.after,
.right,
.footer {
    text-align: center
}

.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 with Media Query

By me a coffee

<body>

@polyxgo

PolyXGO

CSS Grid Layout with Media Query is a powerful tool for creating responsive designs. It enables seamless adjustment of content placement across various screen sizes. Easily integrated into websites, modules, or plugins, this approach ensures flexible layouts that adapt to both desktop and mobile environments, enhancing user experience.

HTML

CSS

JavaScript

Preview: CSS Grid Layout with Media Query

About WikiPoly

Contact

HTML

CSS

JavaScript

Preview: CSS Grid Layout with Media Query

Login

Register