Responsive CSS Site Framework using display:grid

TLDR: How to code a web site that looks like this

And will resize down to this. 

Try the demo CSS code here.

I am, in my heart of hearts, a database developer. If you ask me what I do, I code SQL. 

But I'm also insatiably curious, I want to know how the things around me work. So, I know some networking. I know web server management, SQL management. 

And I'm learning CSS. 

As a part of my quest, I wrote this site (www.dyndeveloper.net) and the business site (www.4penny.net), by hand (in other words, I didn't use WordPress, or some framework like that). 

And I used TABLEs. The whole site was tables inside of tables inside of tables. Because 10 years ago, that's how it was done. Three major things have happened to cause us to move away from that: The death of IE, cell phones, and the rise of the CSS display:grid. Any site that you write in today's world MUST display on a cell phone. So, how can you do that? (stop for a second and resize this web site from full screen to as narrow as it will go, slowly)

This article is a simple(ish) exampe of how to code a web site using display:grid so that it will be RESPONSIVE. That means that it will work on the largest and smallest displays at the same time. Important word, remember that. There will be a buzz word test at the end.

Two: I need to know if you care about CSS content. Should I blog on it? Here, we're GP developers, but I can tell you that in 20 years, I've coded a number of internal sites that attach to GP. A major university, a large plant, a large distributer all use sites that I've built. It's a good skill to know. Want to learn more?

Please... if you've read this far, leave me a comment below.

 

All the code is in the article below. 

 

Related Articles

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

All the code to make this work is below. 

The master page

<%@ Master Language="VB" AutoEventWireup="false" CodeBehind="CSSDemo.master.vb" Inherits="DynDeveloper.CSSDemo" %>
 
<!DOCTYPE html>
 
<html>
<head runat="server">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link href="CSSDemo.css" rel="stylesheet" />
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
        <div class="container">
            <div class="header">
                Header
            </div>
            <div class="menu">
                 
                <a href="CSSDemo2Column.aspx">Two Columns </a> |
                <a href="CSSDemo3Column.aspx"> Three Columns</a> |
            </div>
            <div class="leftwing">
                Left Wing. This column will disappear at < 1000px
            </div>
            <div class="maincontentarea">
                <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
                </asp:ContentPlaceHolder>
            </div>
            <div class="rightwing">
                Right Wing. This column will disappear at < 800px
            </div>
            <div class="footer">
                footer
            </div>
 
        </div>
 
    </form>
</body>
</html>

Page 1

<%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/CSSDemo/CSSDemo.Master" CodeBehind="CSSDemo2Column.aspx.vb" Inherits="DynDeveloper.CSSDemo2Column" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <div class="pageContainer">
        <div class="pagecolumn1">
            This page has two columns. This one always is visible
            <br />
            <br />
        </div>
        <div class="pagecolumn2">
            and this one will disappear
        </div>
    </div></asp:Content>

Page 2

<%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/CSSDemo/CSSDemo.Master" CodeBehind="CSSDemo3Column.aspx.vb" Inherits="DynDeveloper.CSSDemo3Column" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <div class="colThreeContainer">
        <div class="colOneOfThree">
            Column 1. Flexable widths, always taking up 1/3 of the main content area. At 768px they will stack on top of each other.
            <br />Min Height:200px
        </div>
        <div class="colTwoOfThree">
            Column 2. Min Height:50px
        </div>
        <div class="colThreeOfThree">
            Column 3.  Min Height:50px
        </div>
 
    </div></asp:Content>

CSS

body {
    color: #222222;
    background-color: #008081;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif
}
 
.container {
    display: grid;
    max-width: 1400px;
    margin: 0 auto;
    grid-template-columns: 150px auto 150px;
    grid-template-rows: auto auto auto;
}
 
.header {
    grid-column: 2;
    grid-row: 1;
    min-height: 100px;
    background-color: #67e1e2;
    padding: 5px;
}
 
.menu {
    grid-column: 2;
    grid-row: 2;
    background-color: silver;
    height: 30px;
    padding-top: 9px;
    padding-left: 9px;
}
 
    .menu a:link, .menu a:visited {
        text-decoration: none;
        color: black;
    }
 
.leftwing {
    grid-column: 1;
    grid-row: 3;
    background-color: skyblue;
    margin: 5px;
    padding: 5px;
}
 
.maincontentarea {
    grid-column: 2;
    grid-row: 3;
    background-color: white;
    min-height: 200px;
}
 
.rightwing {
    grid-column: 3;
    grid-row: 3;
    background-color: skyblue;
    margin: 5px;
    padding: 5px;
}
 
.footer {
    grid-column: 2;
    grid-row: 4;
    color: white;
    background-color: gray;
    font-size: .7em;
    min-height: 100px;
    padding: 7px;
}
 
@media (max-width:1000px) {
    .leftwing {
        display: none;
    }
 
    .menu {
        grid-column: 1/3;
    }
 
    .maincontentarea {
        grid-column: 1/3;
    }
 
    .header {
        grid-column: 1/3;
    }
 
    .footer {
        grid-column: 1/3;
    }
}
 
@media (max-width:800px) {
    .rightwing {
        display: none;
    }
 
    .maincontentarea {
        grid-column: 1/4;
    }
 
    .menu {
        grid-column: 1/4;
    }
 
    .header {
        grid-column: 1/4;
    }
 
    .footer {
        grid-column: 1/4;
    }
}
 
.pageContainer {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto;
}
 
 
.pagecolumn1 {
    grid-column: 1;
    background-color: beige;
    min-height: 200px;
    padding: 7px;
}
 
.pagecolumn2 {
    grid-column: 2;
    padding: 7px;
}
 
@media (max-width:700px) {
    .pagecolumn2 {
        display: none;
    }
 
    .pagecolumn1 {
        grid-column: 1/3;
    }
}
 
.colThreeContainer {
    display: flex;
}
 
.colOneOfThree {
    background-color: yellow;
    min-height: 200px;
    color: red;
    flex: 1;
    padding: 5px;
}
 
.colTwoOfThree {
    background-color: lightgreen;
    min-height: 50px;
    color: red;
    flex: 1;
    padding: 5px;
}
 
.colThreeOfThree {
    background-color: aqua;
    min-height: 50px;
    color: red;
    flex: 1;
    padding: 5px;
}
 
@media (max-width: 768px) { /*breakpoint*/
    .colThreeContainer {
        flex-direction: column;
    }
}

 

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