Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

HTML & CSS help with my first try at grids

sentinel166

sentinel166

Coder
Hi,
I use the hugo SSG and up until now, a theme which I just customized to make it responsive, but not much beyond.
However I'm sick that each time I modify one thing i have ten more things that bugs for reasons I don't understand and still don't after I somehow resolved the issue, by chance.
I decided to redo the layout in its entirety, from top to bottom, and actually understand everything.
I decided on the grid model since it felt more intuitive to me, at least the idea.
But I can't make it work at all, the explanations I found are as confusing as insufficient as for any other model...
This is the basic css, stripped down to what matters, (although you can find a sample repo here):
CSS: 
html {
    * {
        padding:0;
        margin:0;
    }
}

body {
    * {
        box-sizing: inherit;
    }
    > * {
        max-width: auto;
        max-height:auto;
    }
    display:grid;
    grid: 15vw auto 15vw / clamp(4rem,9vw,9vw) auto;
      grid-template-areas:
    'brand book-page book-toc'
    'book-menu book-page book-toc'
}
#book-menu {
     grid-area: book-menu ;
}
#book-toc {
      grid-area: book-toc;
}
#book-page {
      grid-area:book-page;
}
#brand {
      grid-area: brand;
    place-self: center;
    justify-content:center;
}
And this is the basic html tree:
HTML: 
<!DOCTYPE html>
<html lang="{{ default site.Language.Lang site.LanguageCode  }}" dir="{{ default "ltr" site.Language.LanguageDirection }}">
<body dir="{{ default "ltr" site.Language.LanguageDirection }}"{{with .Page.Params.style}} class="{{.}}"{{end}}>
     {{ partial "docs/brand" . }}
    <aside id="book-menu">
          {{ partial "docs/menu" . }}
    </aside>
    <article id="book-page">
    </article>
      <aside class="hidden clearfix">
{{ partial "docs/toc" . }}
    </aside>
    <aside id="book-toc">
{{ partial "docs/toc" . }}
    </aside>
  {{ partial "docs/inject/body" . }}
</body>
</html>
Here's what it should look like, approximately:
WHAT-it-shouuld-look-like.jpg

As you can see in the pictures, It's not really what it looks like !
the second one is the homepage, without table of content. I confess not having taken that case into account in the css. the html for the homepage does not contain #book-toc.

screenshot-2023-01-26-235050.pngscreenshot-2023-01-26-235548.png
What am I supposed to do for grid to work ?! it won't even go where it's supposed to, let alone limit themselves to 15vw or whatnot !
Or did I miss something glaring in my code ?

thanks for your help, I'm very new at that kind of thing, and feel very dumb sometimes...
 
Last edited:
Solution
sentinel166
And I did it.
overflow-y:scroll in book-page
I don't know why it didn't work before. Perfect, I'm recreating all the layout and behavior I used to have, but this time with a grid system and one I completely understand. My knowledge of css and html will have had greatly improved.
Sort by date Sort by votes
Hard to figure out what is going on. You define four areas but only have three, where is the area 'brand'? You have something with a class of hidden and do not define that. I tried to clean things up and define areas with color:
Code: 
<!DOCTYPE html>
<html>
<style>
* {
padding:0;
margin:0;
box-sizing: border-box;
}
body{
display:grid;
grid: 15vw auto 15vw / clamp(4rem,9vw,9vw) auto;
grid-template-areas:
'brand book-page book-toc'
'book-menu book-page book-toc';
}
#book-menu {
grid-area: book-menu ;
background-color: red;
}
#book-toc {
grid-area: book-toc;
background-color: purple;
}
#book-page {
grid-area:book-page;
background-color: blue;
}
#brand {
grid-area: brand;
place-self: center;
justify-content:center;
background-color: green;
}
</style>
</html>
<body>
    <div id = "brand">
    {{ partial "docs/brand" . }}
</div>
    <aside id="book-menu">
    {{ partial "docs/menu" . }}
    </aside>
    <article id="book-page">
        <p>This is the book-page area</p>
    </article>
    <aside class="hidden clearfix">
    {{ partial "docs/toc" . }}
    </aside>
    <aside id="book-toc">
    {{ partial "docs/toc" . }}
    </aside>
    {{ partial "docs/inject/body" . }}
</body>
</html>

Does this help even a little?
 
Upvote 0 Downvote
Huh, yes and no. You're nice but I would rather break this computer and the whole site if I didn't have a duty to share its content.
How the hell are those widths ?!
How do I tell elements to keep their damn dimensions regardless of content ?
And why doesn't "auto" (or 1fr) means "all the space you can take" ? I had to indicate precise height:100vh to not get a big white gap under the page. And you don't see any image of cat in the top left hand corner ? Me neither !
HTML: 
<!DOCTYPE html>
<html>
<style>
* {
padding:0;
margin:0;
box-sizing: border-box;
}
body{
display:grid;
height:100vh;
grid: 15% auto 15% / clamp(4rem,9vw,9vw) auto;
grid-template-areas:
'brand book-page book-toc'
'book-menu book-page book-toc';
> * {width:100%;height:100%}}
#book-menu {
grid-area: book-menu ;
background-color: red;
}
#book-toc {
grid-area: book-toc;
background-color: purple;
}
#book-page {
grid-area:book-page;
background-color: blue;
}
#brand {
grid-area: brand;
place-self: center;
justify-content:center;
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/600px-Cat03.jpg");
}
</style>
</html>
<body>
    <div id = "brand">
    </div>
    <aside id="book-menu">
    s is the book-page area</p>
            <p>This is the book-page area</p>
            <p>This is the book-page area</p>
            <p>This is the book-page area</p>
                    <p>This is the book-page area</p>
                    <p>This is the book-page area</p>
                    <p>This is the book-page area</p>
                            <p>This is the book-page area</p>
                            <p>This is the book-page area</p>
                            <p>Thi
    </aside>
    <article id="book-page">
        <p>This is the book-page area</p>
        <p>This is the book-page area</p>
        <p>This is the book-page area</p>
        <p>This is the book-page area</p>
        <p>This is the book-page area</p>
        <p>This is the book-page area</p>
        <p>This is the book-page area</p>
        <p>This is the book-page area</p>
        <p>This is the book-page area</p>
        <p>This is the book-page area</p>
        <p>This is the book-page area</p>
        <p>This is the book-page area</p>
        <p>This is the book-page area</p>
        <p>This is the book-page area</p>
        <p>This is the book-page area</p>
        <p>This is the book-page area</p>
    </article>
    <aside id="book-toc">s is the book-page area</p>
            <p>This is the book-page area</p>
            <p>This is the book-page area</p>
            <p>Thidsfsdfd
    </aside>
<script src="[URL='https://codeforum.org/view-source%3Ahttp%3A//localhost:1313/livereload.js?mindelay=10&v=2&port=1313&path=livereload']/livereload.js?mindelay=10&amp;v=2&amp;port=1313&amp;path=livereload[/URL]" data-no-instant defer></script></body>
</html>
 
Upvote 0 Downvote
with the help of some generator, I think I progressed quite a bit. the code below displays the way I want, at least for the basic layout. Responsive and well-named, with nice semantic elements...
HTML: 
<!DOCTYPE html>
<html>
<head><style>
html,body {
    margin: 0;
    padding: 0;
    * {
        box-sizing: border-box;
    }
}
body {
  display: grid;
min-height: 100vh;
  grid-template-columns: 15% auto 15%;
  grid-template-rows: clamp(4rem,9vw,9vw) auto;
  gap: 0px 0px;
  grid-template-areas:
    "book-brand book-page book-toc"
    "book-menu book-page book-toc";
}

#book-menu { grid-area: book-menu;
background-color:red }

#book-title { grid-area: book-title;
background-color:green }

.book-toc { grid-area: book-toc;
background-color:blue }

#book-page {  display: grid;
  grid-template-rows: clamp(4rem,9vw,9vw) 1fr;
  grid-template-areas:
      "book-title"
      "book-content";
  grid-area: book-page;
  background-color:grey;
}

#book-content { grid-area: book-content;
background-color:black }

#book-brand { grid-area: book-brand; }
</style>
</head><body>
  <aside id="book-menu"></aside>
  <aside class="book-toc"></aside>
  <main id="book-page">
    <header id="book-title"></header>
    <article id="book-content"></article>
  </main>
  <header id="book-brand"></header>
</body>
</html>
 
Upvote 0 Downvote
OK, You got the points I was going to give you before you found that generator. You did change the layout, so good for you.
I don't think this is OK:
Code: 
html,body {
    margin: 0;
    padding: 0;
    * {
        box-sizing: border-box;
    }
}
The *{box-sizing: border-box;} should not be placed inside the html,body rule.
Although overkill, this is what it could be:
Code: 
HTML, body, * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
 
Upvote 0 Downvote
OldMan said:
Code: 
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
Click to expand...
why not just the above ?
Also, how can I make it so I create a new child of <body>, that this child takes a specific place in the grid ?
In the same vein, if book-toc is set to display:none, can grid know book-page should extend ? the place gets blank if the element assigned to it disappears.
For now mediaqueries suffice:
Code: 
body {
body {
  grid-template-columns: 1fr !important;
  grid-template-rows: clamp(5rem,9vw,9vw) 1fr !important;
  grid-template-areas:
    "book-page"
    "book-page" !important;
}
}
 
Last edited:
Upvote 0 Downvote
Sorry I meant:
@media screen and (max-width: 600px) { body { grid-template-columns: 1fr !important; grid-template-rows: clamp(5rem,9vw,9vw) 1fr !important; grid-template-areas: "book-page" "book-page" !important; } }
Also, there's another issue, which may or may not invalidate my choice of grid. See book-content will overflow but I wish for book-content and book-title, so the whole of book-page, to stick together when I scroll while book-menu and book-toc stay still.

Currently this makes the whole site
<body> sticks and scrollable at once when book-content overflows:
CSS: 
#book-page {  display: grid;
  grid-template-rows: subgrid;
  grid-template-reas:
      "book-title" "book-content";
  grid-area: book-page;
overflow-y:scroll;
  }

While this makes only book-content scrollable when book-content overflows:
CSS: 
#book-page {  display: grid;
  grid-template-rows: subgrid;
  grid-template-areas:
      "book-title"    "book-content";
  grid-area: book-page;
  }
#book-content { grid-area: book-content;
overflow-y:auto;
}
But I want book-page to scroll !
 
Last edited:
Upvote 0 Downvote
And I did it.
overflow-y:scroll in book-page
I don't know why it didn't work before. Perfect, I'm recreating all the layout and behavior I used to have, but this time with a grid system and one I completely understand. My knowledge of css and html will have had greatly improved.
 
Upvote 0 Downvote
Solution

New Threads

Latest posts

Share this page

Buy us a coffee!

DataCamp Advertisement
Code Academy Advertisement

About Us

Code Forum is a community platform where coding enthusiasts can connect with other developers, engage in discussions, ask for help, and share their knowledge with a supportive community. It's a perfect place to improve your coding skills and to find a community of like-minded individuals who share your passion for coding.

Site links

Stay Connected

Back
Top Bottom