CSS Grid Layout with Media Query

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

.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

<body>

@polyxgo

PolyXGO

HTML

CSS

JavaScript

Preview: CSS Grid Layout with Media Query

About WikiPoly

Contact

HTML

CSS

JavaScript

Preview: CSS Grid Layout with Media Query

Login