website/raspberrypi/styles/grid.css

/* grid for raspberrypi.html */

.landing {
    display: grid;
    grid-template-columns: 1fr 1fr 3fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 3fr 1fr 1fr;
    grid-template-areas: 
        "heading heading . signature signature"
        ". . . . ."
        ". . pi . ."
        ". . . . ."
        "nav nav nav nav nav"
}

.heading {
    grid-area: heading;
}

.signature {
    grid-area: signature;
    text-align: right;
}

.nihon {
    grid-area: nihon;
    text-align: center;
}

nav {
    grid-area: nav;
}

/* grid for language.html */
.landing1 {
    display: grid;
    grid-template-columns: 1fr repeat(10, 2fr) 1fr;
    grid-template-rows: repeat(6, 2fr);
    grid-template-areas:
		"heading heading heading heading heading heading heading heading heading heading heading heading"
		"sidebar main main main main main main main main main main main"
		"sidebar main main main main main main main main main main main"
		"sidebar main main main main main main main main main main main"
		"sidebar main main main main main main main main main main main"
		"nav nav nav nav nav nav nav nav nav nav nav nav"
}

.heading {
	grid-area: heading;
}

.sidebar {
	grid-area: sidebar;
}

main {
  	grid-area: main;
}

nav {
	grid-area: nav;
}