profile picture

Published by Nole

published
updated

Category: Web, HTML, Tech

View Nole's Blog

View Nole's Profile

Report Blog Entry

The Chronicles Of Griddick ( Or Using Grid To Change Your Profile Layout )

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 {
  displaygrid;
  grid-template:
    "left"
    "right";
  grid-column-gap10px;
  grid-row-gap10px;
}
/* normally the width is 40%, try changing back to see why this
doesn't look good */
.profile div.col.w-40 {
  width100%;
}

/* left column */
.col.w-40 {
  grid-arealeft;
  displaygrid;
  grid-template:
    "general-about contact"
    "header  table1 "
    "url-info table2 "
    "mood     table2 ";
  grid-column-gap10px;
  grid-row-gap10px;
}

/* 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 {
  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-arearight;
  displaygrid;
  grid-template:
    "blurbs blog-preview"
    "blurbs friends"
    "comments comments"
    "comments comments";
  grid-column-gap10px;
  grid-row-gap10px;
}
/* contains "View Blog" Button */
.blog-preview {
  grid-area: blog-preview;
}

/* contains about me */
.blurbs {
  grid-area: blurbs;
}
/* 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 {
  margin0px;
}





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.



18 Kudos

Comments

Displaying 7 of 7 comments ( View all | Add Comment )

Rainstorm Moonbow

profile picture

I love the morrowind aesthetic!


Report Comment

SDesires

profile picture

I'm going to have to try this out in the future...gives me ideas!


Report Comment

Noah

profile picture

I wish I knew how to understand this


Report Comment

Shanen

profile picture

Idk how this passed under my radar, but easily the best rhyming documentation on this site


Report Comment

corentin

profile picture

Best documented example of config here for now


Report Comment

Nein MC

profile picture

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.


Report Comment

meh!!

profile picture

now this is proper spicy 👀


Report Comment