Kevin Powell - Community•15mo ago

Building a replica page but have issues with positioning and nesting of elements

I've attached the image I 'm trying to replicate, and here is my current progress: https://codepen.io/Laing91/pen/GRwyaMq 1) Is it going to be easier to include Announcements and Trending inside the grid container? 2) An issue I come across with my live version (codepen doesn't show this), is that the side navbar doesn't meet the end of the page, or it does if I increase the width of that nav to 30% or higher, but at 20% or less it seems to have a large amount of invisible left-padding. https://callum-laing.github.io/admin-dashboard/ 3) I'm trying to figure out how to implement and position the top hero bar. I thought about creating a new container outside of the grid and trying to position it at the top of the page (flexbox maybe?), but in practise I couldn't get it to go where I wanted, and it kept overlapping the top of the side-navbar.

107 Replies

Tok124 (CSS Nerd)•15mo ago

You should not set a % of the width or you end up with this problem

Tok124 (CSS Nerd)•15mo ago

Also, you have this

.grid-container {
    display: grid;
    grid-template-columns: 350px 350px;
    grid-template-rows: 200px 200px 200px;
    gap: 20px 20px;
}

.grid-container {
    display: grid;
    grid-template-columns: 350px 350px;
    grid-template-rows: 200px 200px 200px;
    gap: 20px 20px;
}

You can change it to

.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

You have defined it to have 2 columns already, so the third item will go on a new row because there is only 2 columns. therefore you don't need to include grid-template-columns. and setting a fixed width like 350px is just not a good idea. use the fr unit so that the width can change if needed

CDL•15mo ago

I actually have a plan for the grid

Tok124 (CSS Nerd)•15mo ago

also, row is the default value for flex-direction so you don't actually need to write that

CDL•15mo ago

https://codepen.io/Laing91/pen/ExOozRJ created this. I'd then just add the project/announcement/trending grid container inside of this Ah. Thanks for this, that makes sense now

Tok124 (CSS Nerd)•15mo ago

Oh great ! 🙂 I would make it something like this https://codepen.io/tok124/pen/LYXeoXE forgot to add top:0; to aside but added now

CDL•15mo ago

Would making the entire page 1 grid container work? or is that asking for trouble? I've just made this... https://codepen.io/Laing91/pen/ExOozRJ

Tok124 (CSS Nerd)•15mo ago

You can make a page layout using grid yes. This is the awesome thing about grid. I have made a few layouts myself like this https://codepen.io/collection/xKYZeR You can see in this collection

CodePen

Layouts - a Collection by Tim on CodePen

CDL•15mo ago

Oh sweet thanks for sharing 😄

Tok124 (CSS Nerd)•15mo ago

Sure no problem 🙂

CDL•15mo ago

definitely feels much easier and more comfortable than using flex to do this

Tok124 (CSS Nerd)•15mo ago

Yeah i agree

Tok124 (CSS Nerd)•15mo ago

But yeah you can see here. Instead of making like fixed values in grid-template-columns as you do. I just create more columns