General description: ↑
The page you are looking at is purely meant to give an example of a grid-layout.
Not much is done about styling, that is for everyone to fill in themselves ofcourse.
You can look at the source-code and the stylesheet (see source-code head section) for the basic stylings which you will find under /* BLOCKS */, /* HTML ELEMENTS */ and /* GRID */.
All the other sections in the stylesheet are there to make the page fit within the Exdomo-domain, they are not essential for the grid-layout to work.
contentblock1 ↑
We start off with 4 columns using grid-template areas:
.body {
display: grid;
background-color: lightgrey;
padding: 0.6em;
gap: 0.6em;
grid-template-columns: repeat(4, 4fr);
grid-template-rows: max-content;
grid-template-areas:
"a a a a"
"b c d e"
"b f g h"
"b i i i"
"b j j j";
}
contentblock2 ↑
At 900px width we switch to three columns (note that grid-template-colums breaks into two rules here because of the small width of this container, in the css ofcourse it's all on 1 line):
@media only screen and (min-width: 641px) and (max-width: 900px) {
.body {
grid-template-columns: repeat(3, 4fr);
grid-template-areas:
"a a a"
"b c d"
"b e f"
"b g h"
"i i i"
"j j j";
}
}
contentblock3 ↑
At 640px width we switch to two columns (and lower the padding and gap a bit which is not really necessary):
@media only screen and (min-width: 401px) and (max-width: 640px) {
.body {
padding: 0.4em;
gap: 0.4em;
grid-template-columns: 1fr 2fr;
grid-template-areas:
"a a"
"b c"
"b d"
"b e"
"b f"
"b g";
"b h";
"i i";
"j j";
}
}
contentblock4 ↑
And at 400px width we switch to only one column:
@media only screen and (max-width: 400px) {
.body {
padding: 0.2em;
gap: 0.2em;
grid-template-columns: 1fr;
grid-template-areas:
"a"
"b"
"c"
"d"
"e"
"f";
"g";
"h";
"i";
"j";
}
}
contentblock5 ↑
You can put a flex-container inside one of the blocks, like for example this simple menu below (notice that the buttons fill the available space evenly and automatically):
contentblock6 ↑
Using grid-template-areas may look complicated at first but it gives you a clear presentation of how your page will look like.
Especially when the media-queries start kicking in you can see how much power and flexibility you have in designing the page:
you can add as many blocks as you like and give them whatever width and location you want, until it looks exactly like what you had in mind. Just play with the grid-areas a bit and you'll soon notice how easy it actually is.