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
You should not set a % of the width or you end up with this problem
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
And it looks like this
i set each column to 1fr
Ahh right yes, I forgot about fr
so then i can use grid-column:span 3; for example. This is awesome 🙂
But well. grid is very much like an html table. In the sense that you can span multiple rows and multiple columns and all that.
Long time ago websites was actually made using tables, but yeah, this is a terrible idea now that we have grid hahaha
so instead of
you'd do ?
You can use the repeat function
And if you can avoid creating rows like this, you should avoid it
just
grid-template-columns:repeat(5, 1fr);
this is enoughOh that's cool
Yeah 🙂 so it repeats 1fr 5 times instead of writing 1fr 5 times manually
Perfect
But it's very nice to see you have started with grid. we need more people to use grid 🙂
But yeah, grid is advanced and it took me forver the really understand it. But now that i do understand it, i love it !
But grid is not for everything. for example for a navbar i would NOT recommend using grid hahaha.
So when building a website you should use both flex and grid 🙂 Both is amazing but for different things 🙂
Ah yeah I love flex for navbars, I just love how amazing grid feels for creating these kind of layouts..
You should watch this video
https://www.youtube.com/watch?v=rg7Fvvl3taU
It's very helpful when it comes to learning grid 🙂
Kevin Powell
YouTube
Learn CSS Grid the easy way
It can be easy to get bogged down in how grid works, with a lot of new properties, values, and even units! So let's try and simplify things as much as possible, because to get started, you don't need to know everything about how Grid works.
🔗 Links
✅ The GitHub repo: https://github.com/kevin-powell/learn-grid-the-easy-way
✅ More videos on gr...
do you still use a column-start and row-start if you're using column/row-span?
Yeah, same here 🙂
if you do grid-column:span 3; you don't need to use column-start and column-end
grid-column:span 3; will make the element start from it's original position and span 3 columns
Aha. Perfect
Hey thanks a bunch, that's super helpful
Yeah 😄
No problem man 🙂
I'm done for the night but I think tomorrow i'm best nesting a grid container inside the main layout I have there, then I think it should work.. I hope... might have to do some more research first
Yeah, watch kevins videos about grid. He have 3-4 videos about how to get started with grid. It's super useful videos and should be enough for you to fully understand it. Since you already have at least some idea on how it actually works
https://www.youtube.com/watch?v=8QSqwbSztnA
This one is super useful, then you have this series of grid videos that is also really useful
https://www.youtube.com/watch?v=_lEkD8IGkwo&list=PL4-IK0AVhVjPv5tfS82UF_iQgFp4Bl998
Kevin Powell
YouTube
Get started with grid WITHOUT being overwhelmed
It can be easy to be overwhelmed by CSS grid, so in this video I look at the very basics to get you started without worrying about too much at once.
🔗 Links
✅ The next step with Grid: https://youtu.be/rg7Fvvl3taU
✅ Grid inspector: https://youtu.be/m04RkJwzFgE
⌚ Timestamps
00:00 - Introduction
01:02 - the relationship between the pare...
Kevin Powell
YouTube
The EASIEST way to get started with CSS GRID
I always saw grid as a very powerful, but slightly complicated tool, for creating layouts. I love it SOOO much, but there is just so much to it... but is there a way to simplify it down and get started with it without having to get deep into the weeds?
Well, I think so with the use of
grid-auto-flow!
I didn't mention it in the video, but if...Yeah I managed this with 1 grid container, but obviously because it's 5 deep, It's left a grid row at the bottom so it's not quite a copy of the design I'm replicating https://codepen.io/Laing91/pen/ExOozRJ
Oh dope, I forget Kevin did a series
I'll check them out!
Looking good !
And yeah, do that ! 🙂
Oh, sorry, me again. 1 last thing before I go! so I have this so far, but obviously there's no gaps, if you look at the design final version, there is some gaps, to allow for title text, and just to space things out... is that possible on grid-items, or can you only apply gaps to the container?
https://codepen.io/Laing91/pen/ExOozRJ
You can add margins to the grid items but this could get messy.
However I think that you will need to do what you mentioned before ie to create another grid within the container.
In the area underneath the header, a main grid with 2 columns:
The left-hand column (projects) would then have its own grid to place the title and the 6 cards.
The right-hand column could have a grid with a single column.
Both of these columns could share a first-row height for the titles and gaps for the spacing
This is what I thought, thanks Chris! I'm finding this so much easier using grid.. Obviously I know I need to use flex too for things, but grid is just... my language.. haha
You will need to know and use both. Grid is not always the best solution, especially if you need the elements to be “flexible”.
For what you are trying to recreate I would use a combination of both.
Honestly, I would use some Gridception. I don't see that as one layout but many grids in grids with floaty flexy items inside those.
Alright lads, I'm here so far https://jsfiddle.net/Adjust91/85tq4efx/4/
Edit fiddle - JSFiddle - Code Playground
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
what is my issue you may ask, it looks fine on the jsfiddle. Well, here is my issue (see image)
I did add flex: 1 0 auto; to stop the shrink and keep the grow at 1, but it doesn't seem to be taking any effect? (I may have done it wrong tbh)
flex is not a grid property
or rather not a block property either xD
then I am stumped.
What are you trying to stop from growing?
you can see the difference, and hwat I'm trying to get I guess
the project, announce and trending sections are not filling out as much as I want them to
make the .content class grid
remove the flex: 1 bit (as .content would need to be flex for it to work on children)
grid is great at just filling space 😉
don't need to tell it to
true
so I've done that and uh
.project is only aking up like half of the .content grid
right cause its going to fill xD and you have two cells
you could
grid-template-row: auto 1fr;so have i effectively now just done grid container -> grid container -> grid container?
seems so
sure
Nothing wrong with that 😉
no not at all, it works perfectly
I should do that also for announce/trends I suppose
not sure why you are using inline-grid 😮
removed it, wasn't sure either
also
auto is default
You don't need to add this, specially cause you define the areas
Least I don't think 🤔
If I remove that it just makes it a bunch of full width rows
atm it's working
I just need to fix the announce/trends part
I know you are looking at a different issue but, as your .main-content is a grid with 3 columns, you don't need 4 columns on the main .container grid.
Your .container grid just needs 2 columns - for the nav column and the main column.
you are suffering from grid overload 😛
you're right 😄
As regards the main content and your issue with the announce/trends part, I think that you will need to separate the main content from the right-hand side column, so that if the announcements or "trending" boxes extend, they don't affect the "projects" boxes.
I think projects are inside the content container
so at the moment announce/trending are in the main container, but not the nested container
container -> main-content -> content -> projects
container -> main-content -> announcements/trending
so you think put announcements/trending inside container, and take it out of main-content?
I've adjusted that: https://jsfiddle.net/Adjust91/85tq4efx/23/
The last question I have, then I gotta shoot for the weekend is, I have currently columns set to 300px auto auto.. Announcements/trending need to be narrower than the rest.. how would I go about amending that?
Edit fiddle - JSFiddle - Code Playground
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
I would probably have one main grid with 3 coolumns and 6 defined areas:
I would place the "projects" in the "main" area and that in turn would have it's own grid.
I would then place the right-hand column (announcements and trending) in the "right " area.
This way they would be separate.
This would also enable you to make the Announcements/trending column narrower if desired.
by doing that, I end up with them ontop of each other
I have a codepen with how I might do this which I can share it with you if you want but I know that you prefer to work these things out yourself which is great.
that shouldn't happen if you are using grid-areas
I assume you dont mean set both announcements and trending to grid-area: rightbar, and have the container as
you don't need two rows with the same areas
what the
As I understand it you want something like this (I have just made my right-hand column narrower as per your comments)
that's exactly what i'm trying to do
I tried with them both set in their own grid-area, which works but it doesnt "fill" the column, and then I tried turning both to grid-area: right; and that just caused an overlap
This is set up with a main container (which to be honest could be the body to reduce the need for the extra div) with the areas as I defined a few messages ago.
Then the main content (projects) has it's own grid where I have defined 2 equal columns (1fr) and 4 rows, the first one having a height of 40px for the <h2> and the others having equal heights
grid-template-rows: 40px 1fr 1fr 1fr;
Finally the right-hand column is also a grid with a single column and with rows: grid-template-rows: 40px 1fr 40px 1fr; - this ensures that the <h2> has the same height as the <h2> in the projects container.
And just to jump back a step, the global container basically has this:
This gives 300px to the left-hand column, full available width to the center column (for the projects) and 300px to the right-hand column.
The left-hand column spans the full height.
The header spans the second and third column and has a height of 180px, leaving the second row to fill the remaining available height.I followed majority of that, but I think I miss-interpreted what you did in the first 3 paragraphs
easiest way to see i guess is https://jsfiddle.net/Adjust91/85tq4efx/26/
Edit fiddle - JSFiddle - Code Playground
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
I tweaked: announcements, trending, .content, .main-content, .container
when I look at it, it looks right, but I seem to have messed up the nesting. I have rightbar inside container along with nav, sidebar and main-content, so I'm not sure why it has dropped way below the main content
I think you have an extra div in there somewhere..... searching for the cause...
(small tip - it is generally easier to write the CSS in order of display on the page, I am having a hard time jumping around trying to find the selectors)
Yeah I need to re-factor it when I'm home Monday
it's giving me a headache trying to find everything lol
for "my" solution to work you need to take the h2s out of their containers in the right-hand column
Do you mind sharing what you've done? I can then compare it to mine and see where I've gone wrong
you have assigned your "announcemnts" selector to the rightbar grid area.
Of course I don't mind, I only didn't share it as you may prefer to work it out yourself.
https://codepen.io/cbolson/pen/NWEyVad
Usually I would try and figure it out, but I think I'm at a point here where I just need to see what the heck is wrong 😛
removing the assignment to announcements + trending almost did it, but not quite
to be fair this isn't the simplest layout to get started with grid 🙂
You're telling me. 😄 they could've just had me build the header with the projects hahaha
It might look simple but that righ-hand column complicates it a bit
Oh man I was SO CLOSE!
I've gotta shoot, airport run, but I really appreciate the assistance @Chris 😄 thanks a bunch man 🙂
OK, have a good weekend!
Anyone have any tips on using and positioning SVG's inside existing code? struggling a bit with positioning it. My code is a complete mess, but ill tidy it up when I'm done, right now I'm just going whilst my brain wants to be active 😄
https://codepen.io/Laing91/pen/NWEMKgx
at the moment I'm trying to line up the magnifying glass next to the search bar, I can see why it's not fitting exactly, but can't quite figure out how to fix it. Dev tools shows the search bar sits a little lower due to the "searchbar" div they're both contained in.
You just need to give your searchbar a display flex and then align the items in the center
Haha awesome thanks @Chris . I think I just need to add some SVGs and I'm done, finally.
Still super messy but I've made some adjustments and added some SVG's! https://codepen.io/Laing91/pen/NWEMKgx?editors=1100
I won't waste much more time on this as I need to get moving onto the next challenge, however... how would I go about adding some content to sit next to the bell at the top right corner? every time I try to add something it ends up sitting below it :/
To make the trending items stretch to the fuñl@heigh of the container just remove the .trending-content inner container - you don’t need it and is messing up the flex.
Lovely thanks Chris! I think I've done it then 🙂
Your search bar and bell should all be in a single comtainer with flex. You can then add more items and the will all be in the same row
I did try that but the bell sat at the very edge of the searchbar and I couldn't figure out how to push it to the right
I ended up sticking it all in a grid container using grid-areas
If you then give the bell a margin-left: auto it will be pushed over to the right
Let me try that then!
Grid areas is another valid method but I think that this is defiantly a good use case for flex
I think so
I've noticed the text in the project cards spills out when the page is shrunk. I hadn't really paid attention to it as the challenge is to sort it on a desktop full screen view, but I guess that's something for responsiveness later on
shrinking the font-size when the page shrinks is probably the best way to do it
They didn’t spill out a few minutes ago before your recent changes. You changed something whilst I wa a looking at your trending column but I don’t know what it was. (I am on the mobile so it is really hard to see anything on codepen)
Shrinking the font size is not the best way to deal with responsiveness.
You are using grid areas so the easiest thing to do would be to adjust your area definitions for different breakpoints.
I see what you have done - you have given your rows a specific height in pixels. Those should be 1fr
Ah, I changed the values of my rows because the trending section spilled out and gave me a scrollbar
I have former your latest version and made a couple of changes to get the trending contents to stretch to the full height of their container https://codepen.io/cbolson/pen/NWEMPGO
Oh neat
I have commented my changes - other than putting the grid rows back to 1fr it was literally just a couple of changes in the trending selectors
Ah I see what you've done, yeah, hey I wasn't too far off eh?! I've learned a lot from this project alone 😅 thanks a bunch for the patience
⭐