Report Blog Entry
Here today, I will demonstrate a way,
of using a css grid type of display.
/* =============== Layout =============== */
/* https://www.w3schools.com/css/css_grid.asp */
/* https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template */
/* Contains both the left and right panels */
.profile {
display: grid;
grid-template:
"left"
"right";
grid-column-gap: 10px;
grid-row-gap: 10px;
}
/* normally the width is 40%, try changing back to see why this
/* normally the width is 40%, try changing back to see why this
doesn't look good */
.profile div.col.w-40 {
width: 100%;
}
/* left column */
.col.w-40 {
grid-area: left;
display: grid;
grid-template:
"general-about contact"
"header table1 "
"url-info table2 "
"mood table2 ";
grid-column-gap: 10px;
grid-row-gap: 10px;
}
/* Your title/Name */
h1 {
grid-area: header;
}
/* Your picture/online status */
.general-about {
grid-area: general-about;
}
/* Mood/blog/pics */
.mood {
grid-area: mood;
}
/* contact */
/* contact */
.contact {
grid-area: contact;
}
/* spacehey URL */
.url-info {
grid-area: url-info;
}
/* General/Music/etc */
.table-section:first-of-type {
grid-area: table1;
}
/* The other table */
.table-section:last-of-type {
grid-area: table2;
}
/* right column stuff */
/* right */
.col.right {
grid-area: right;
display: grid;
grid-template:
"blurbs blog-preview"
"blurbs friends"
"comments comments"
"comments comments";
grid-column-gap: 10px;
grid-row-gap: 10px;
}
/* contains "View Blog" Button */
/* contains "View Blog" Button */
.blog-preview {
grid-area: blog-preview;
}
/* contains about me */
.blurbs {
grid-area: blurbs;
}
/* Friends pictures grid */
/* Friends pictures grid */
.friends:not(#comments) {
grid-area: friends;
}
/* comments */
#comments {
grid-area: comments;
}
/* clears margins making grid-gaps more uniform
" > *" selects all child elements */
.profile > *,
.col.w-40 > * .col.right > *,
.profile .blurbs,
.profile .contact,
div.col.w-40.left div.table-section,
div.col.w-40.left div.url-info {
margin: 0px;
}
Notice the .profile class is the parents of the columns
It actually uses tables for a layout! Once it was common.
We change it to grid and make it into rows,
by using grid-template we can name those.
The left and right .col's need a grid-area plus a name
otherwise they wont be assigned to their parent grid's claim
We stack them on top and what we see
is the columns became rows so neatly.
Each .col is now also typed as a grid.
And these pictures illustrate what I did:
I put general-about on two lines,
and so it stretches to fill two rows in kind.
In this layout I said contact to the top right!
Notice the grid-template's names correspond to this sight.
Finally a picture of the second .col
I left it basic, but now you know grid's call.
By changing grid-area and grid-templates you can make many layouts.
I am sure you will go forth and make all sorts, I've not any doubt.
If this tutorial format is truly terrible,
I will enact changes to make it very bearable.
Comments
Displaying 7 of 7 comments ( View all | Add Comment )
Rainstorm Moonbow
I love the morrowind aesthetic!
SDesires
I'm going to have to try this out in the future...gives me ideas!
Noah Quinn
I wish I knew how to understand this
Shanen
Idk how this passed under my radar, but easily the best rhyming documentation on this site
corentin
Best documented example of config here for now :o
Nein MC
OOOOHHHH!!
Apart from this making profile customization much more flexible: I think I used grids once or twice, for something super basic... but this tutorial did more for me than all the time I spent on MDN! Thank you so much.
meh!!
now this is proper spicy 👀