Responsive Site Design 2

I don't start new sites all that often, so it's helpful to have the frameworks ready. This is a site that has two rows and two columns, the right column spans both rows. 

I need the page to change to one column with all three areas on top of each other, like this:

Becomes this, if the screen is resized below a certain point

Related Articles

... and you 'll find more on the NET Development Menu

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Two Columns Layout</title>
    <link rel="stylesheet" href="styles/Containers.css">
</head>
<body>
    <div class="contentContainer">
        <div class="genericContainer ">
            Container 1<br />
        </div>
        <div class="genericContainer ">
            Container 2
        </div>
        <div class="genericContainer item2">
            Container 3
        </div>
    </div>
</body>
</html>

CSS

.contentContainer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 10px;
    padding: 10px;
    background-color: aqua;
 
}
.genericContainer {
    padding: 20px;
    text-align: center;
    background-color: #f0f0f0;
    border: 1px solid #ddd;
}
 
.ColumnThatMoves {
    grid-row: 1 / span 2; /* Spans both rows */
    grid-column:2
}
 
/* Media query for screen widths under 1000px */
@media (max-width: 1000px) {
    .contentContainer {
        grid-template-columns: 1fr; /* Single column layout */
        grid-template-rows: auto auto auto;
        background-color: lightgoldenrodyellow;
    }
 
    .ColumnThatMoves {
        grid-row: auto; /* Position under the first column */
        grid-column: auto;
    }
}

 

RealWorldCode gives developers practical, real‑world solutions with clean, working code — no fluff, no theory, just answers.
Links
Home
Knowledge Areas
Sitemap
Contact
Et cetera
Privacy Policy
Terms and Conditions
Cookie Preferences