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.
![](https://cdn.answeroverflow.com/1128806404380184687/dashboard-project.png)
107 Replies
You should not set a % of the width or you end up with this problem
![](https://cdn.answeroverflow.com/1128812026014212187/image.png)
Also, you have this
You can change it to
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
I actually have a plan for the grid
also, row is the default value for flex-direction so you don't actually need to write that
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
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
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
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
Oh sweet thanks for sharing ๐
Sure no problem ๐
definitely feels much easier and more comfortable than using flex to do this
Yeah i agree
But yeah you can see here. Instead of making like fixed values in grid-template-columns as you do. I just create more columns
![](https://cdn.answeroverflow.com/1128816952714993714/image.png)
And it looks like this
![](https://cdn.answeroverflow.com/1128817027818197022/image.png)
i set each column to 1fr