simple layout using grids ---- ★

<style>
:root {
  --light-gray: white;
  --gray: black;
  --dark-gray: black;
  --darker-gray: black;
  --logo-blue: black;
  --darker-blue: black;
  --lighter-blue: black;
  --even-lighter-blue: black;
  --lightest-blue: black;
  --red: black;
  --dark-orange: black;
  --light-orange: black;
  --even-lighter-orange: black;
  --strange-yellow: black;
  --green: black;
  --light-green: black;
  --medium-green: black;
  --dark-green: black;
  accent-color: #1D4ED8;
  accent-color: var(--logo-blue);
}
main {
  padding: 0px;
}
.row.profile {
  display: grid;
  grid-template: "title title title" "contact contact contact" "general-about blurbs blurbs" "interests interests mood" "interests interests url-info" "links blog-preview blog-preview" "comments comments friends";
}
.col.left, .col.right {
  display: contents;
}
span[itemprop="name"] {
  grid-area: title;
  text-align: center;
}
.general-about {
  grid-area: general-about;
  display: flex;
  flex-direction: column;
}
.blurbs {
  grid-area: blurbs;
}
.mood {
  grid-area: mood;
}
.row.profile .contact {
  grid-area: contact;
  display: block!important;
}
.url-info {
  grid-area: url-info;
}
.table-section:not(.table-section + .table-section) {
  grid-area: interests;
}
.table-section + .table-section {
  grid-area: links;
}
.profile-info {
  display: none;
}
.blog-preview {
  grid-area: blog-preview;
}
.friends:not(#comments) {
  grid-area: friends;
}
#comments {
  grid-area: comments;
}
#comments, .friends:not(#comments), #comments, .blog-preview, .table-section + .table-section, .table-section:not(.table-section + .table-section), .profile .url-info, .row.profile .contact, .mood, .profile .blurbs, .general-about, .profile h1 {
  background: black;
  border: 2px outset black;
  margin: 1px;
  padding: 1px !important;
  width: 100%;
  max-height: 350px;
  overflow: auto;
}
p, a, h4, * {
  color: white !important;
  font-family: ms gothic;
}
</style>

link view full image of layout!!!! ignore the "hey" in the "about me", that wont be there lol i forgot to take it out for the ss

ive had so many people ask me for my profile code in the past (well, not that many. im hyperbople prone) and im never able to give it because its very specific to the content in my profile so i thought id make a more generic one hooray!!!!

you can change what div (part of the layout, e.g. blurbs) goes where by changing the template in the quotation marks where it says "grid-template"

TO UNDERSTAND A LITTLE HOW GRIDS WORK,,,, PLEASE READ THIS BLOG!!! -> https://blog.spacehey.com/entry?id=1724

its the only reason i understand anything about css grids at all,,,,,,,

some simple alternative grid-templates:

3 columns

"title title title" "general-about blurbs mood" "general-about  blurbs url-info" "blog-preview interests contact" "friends comments links"

1 column

"title" "general-about" "mood" "contact" "blurbs" "interests" "blog-preview" "url-info" "links" "friends" "comments"

alternating 1/2 column(s)

"title title" "general-about contact" "blurbs blurbs" "url-info mood" "interests interests" "blog-preview links" "friends friends" "comments comments"

please go ahead and change the colours and font etc etc!!! i left it simple in design specifically so that u could do this!!! have fun :D

also - please feel free to feed back to me w anything thats wrong w the style code i posted!!! i understand that its messy and not done properly alr tho dw LMAO

im not gonna be able to solve most of ur problems tho j due to not being on ur computer,, ill try but i j might not be able to sorry!! <33