Suggestion for Page Layout and How to Manage It
Hello šš»
I would like to know,
- How can I make aside element sticked on the right of the grid? I used
position: sticky; but probably going to play with it more later on.
- Since I am trying to make it responsive, how can I make it on top of the screen? Should I put section and aside element in a div? (But this time my grid-template-are property won't work well)
- Should I use sub-grid? I have never used it before...
Therefore, I will keep displaying sections on below of first "section section aside" so you might guess how it would look like. All good! But when it becomes responsive layout as mobile, it becomes:
Which you can imagine how bad it would look like. What would you recommend to me for this kind of situation?
99 Replies
I have tried updating
grid-template-area with @media but nothing got update. It did not become "section ... section ... aside".To make it align to the right of its cell, you can use justify-self: end. If you want it in the top right corner of the cell, also add align-self: start; bottom right corner , align-self: end. Or center of course.
You cannot use
āSectionā
āAsideā
āSectionā
The section cannot be in the first row then skip the middle then also be on the bottom row. To overlay items you have to explicitly declare the line numbers on both.
Not sure what you mean by āhow can I make it on top of the screenā?
Sorry, I was meant for main element's first element. Which can be achived with reversed column if I go with flex.
But I am using grid, and I am not really familiar with grid so yeah.
Makes sense.
You can use order in grid like you can in flex
So we can use order on grid too?
I thought it is only avaliable for flex
Or you can just declare its grid area as first in the grid
Correct
Also, isn't that weird?
I can not update grid-template-area
This is inside my media query
on normal
it is section section aside
so shouldn't it also re-order its position?
Yes as long as you have given everything their
grid-area: I did
not
But they canāt have the same name , do you have two sections with a
grid-area: section ?
You have to tell the header itās grid-area: header, footer that itās grid-area:footerWhen did it:
I guess, now I have to re-code everything
Can you share your codepen
I was using vsc but lemme share it on codepen
https://codepen.io/Neodevils/pen/ExrqpyK
this is with areas of course
just leaving a side note that justify self is a grid property and align self is a flex property so u cant use them together
Adding grid-area: article to main
kinda fixes the layout
You have two grids declared. On the grid on your body, you have grid areas declared like aside and section but those are looking at their parent grid, āmainā which donāt have grid-areas defined
So, actually grid on body is not required at all
If you replace aside, section etc with āmainā then give the main a grid-area of main; then in you grid for the main declare the template areas of how you want them to live in that grid, the aside will know where itās grid area is
But on main is required
Sure that would work
flex, column would work
yeah
It will work without flex, as ācolumnā is the default behaviour for block items
Then on your main grid, give it grid-template-areas:
āArticle article articleā
āaside section sectionā
so using grid on main,
with:
"section aside"
section with big span but how can I achieve that?
and on media query I just reverse the grid-template-area with "aside" "section"?
Sorry forgot about article but yeah got the point
Section with big span? Iām not sure what you mean ?
I want to make section bigger than aside
2x of it
Thatās why you have section spanning two columns
And aside is in one
I can't make it with only a section word?
Can't we make our grid's box bigger than other boxes?
Yes, you already have. Itās spanning 2/3 columns with āsection section asideā
You may have to mess with your grid template columns values to
Iām not sure what you mean by this , your grid box bigger than what other boxes?
So I must use "section section aside"?
I am just asking like: "section aside" but section is taking 600px while aside 300px
Is that kind of thing possible or not?
Yes it is possible, I was just following your example with the three cold
because on flex, we can define flex-grow: 2 and make it bigger than other elements
I know, thank you for that. I just wanted to know.
You can say grid-template-columns: 2fr 1fr
I add it to main, but can't I play with section or aside instead parent element?
It would be better and readable to me if we can resize the element on with it's own properties
And then do
grid-template-areas: āarticle articleā āsection asideā
Which parent element are you talking about ?I will probably do it like that. But pardon me, I am just talking about the "grid-template-columns: 2fr 1fr" you said is for main which is parent element right?
On grid on the main, if you want the first column to be twice the size of the second that is one way to achieve that
I am asking "Can't we achieve size of columns on section element directly? Do I have to set it on parent element always?"
Oh thank you
that's what I wanted to hear š
No you donāt have to set it on parent always, could have
grid-template-columns: auto auto; and the columns will be the size of the elements within them
Then you just assign the grid areas to the grid on mainHmm, I see
grid-template-areas:
āarticle articleā
āsection asideāThanks hart, it was helpful
Happy to help
Iāll be offline for a bit but lmk if you get stuck or have any other questions. If youāre not aware yet, the grid inspector in the dev tools can be very helpful when learning grid
Hart, what about aside element being sticked on the right?
Oh okay, sorry sorry
Take your time
I thought you wanted it on the right?
Column 2?
No, no. My first question was about āhow to make aside element stick on the right place even if I scroll downā
You want it to be position: fixed ?
Well, wouldnāt it be breaking down grid layout?
Yup it does
But can fix it
All good
Not actually working as I wanted but well
I know position absolute works within grid cells but donāt remember if position fixed breaks out of the grid or if when scrolling past the end of the main (grid) it stays in its cell. I can play with it later if you havenāt achieved what youāre intending and update the codepen
All good, I will handle them. Thanks Hart. Take your time 
How is it going for you?
This is the last thing I have done
But sadly, I canāt make the aside is having full height of section
Sorry, video was made for someone else but yeah still same thing
I am not on my laptop right now so I couldnāt take a screenshot š
The numbers I have added is just a magical numbers
Which like I put width 42.5vw for aside > div:nth-of-type(2) element to get same width of aside > div:nth-of-type(1) element.
1. div has a fixed width so its like;
image (declared height: 150px, which is width equal to 104px automatically) + 350px child div element which is white box.
If I put 100% width on child div, it will simply break cause it has absolute elements inside it (button) and also member images.
When you get on your laptop send me a codepen W your current code. Something that took me a while to learn is if something is in a grid cell, giving it a width percentage makes it that percentage of the cell itās in. You want to use the columns and rows to set the size of the element and donāt set the width on the child itself
I guess I will just remove grid š„¹
I published my page but the boxes are out of size
https://neodevils.github.io/new-minesa/
The page looks so bad on mobile kdfjjdjd
Even though I have added @media query, somehow it doesnāt work on mobile huh
Iām not on my laptop so I canāt inspect and look at your code. If you assigned anything other than a grid-area name to the children like grid-column:2; it will then create an implicit column in the media query. So anything the children have has to be reassigned like grid-column: initial;
Donāt know if thatās the issue but thatās the first thing that comes to mind if grid isnāt doing it for you within the media-query.
What is it youāre struggling with ? Just laying everything out the way you want?
Mainās margin is stopping after a width. If you check the link you can see elementsā width kinda breaking its boxes
Especially when using grid you donāt need to set a width , you use the template columns to set the elements width and they take on the size of the cell theyāre assigned to.
When you say ābreaking its boxesā, do you mean the grid cells? Or the grid as a whole?
Or do you mean its overflowing as I see on mobile
so im looking at it. looks great on desktop! fyi is the default so you dont need to declare that.
you have redeclared
place-content: center in your media query which is contributing to the content being cut off
Its also being cut off because there is nothing that is making the content smaller on mobile, you dont have a clamp on your font-size so the content is just taking up more space then there is so its getting cut off.
or side-scrolling
Then when your font-size is fluid to the size of the viewport, you can set your margin and padding in ems instead of using a clamp on marginSo get some clamps set up and apply them to your text sizes. utopia is a good one that will spit out several scales that you can easily apply to your body font-size, h1, h2, h3, etc and that should help
https://utopia.fyi/type/calculator?c=320,18,1.2,1240,20,1.25,5,2,&s=0.75%7C0.5%7C0.25,1.5%7C2%7C3%7C4%7C6,s-l&g=s,l,xl,12
the other issue may be your images like this one
aside div.guild-container > img
setting height and width esp in pixels means its going to take up that much space no matter what. fixed heights are a big no no. If you absolutely need a height, use min-height so you dont get overflow Aspect-ratio is also a new property that is helpful.Well, width has been settled on aside element (white box) cause it is an absolute element so yeah. I gotta make it a normal element with auto width so grid would work normally
Ig its causing the all issues xd
You gave it a width or you let it fill up the column and made that grid col the width you want it to be?
I just set a fixed width
Since aside had two elements and one of them absolute element
I had to set a fixed width
But I just figured out a few days ago, I can just make that aside is div box with flex space-between with images inside the div
Then a div inside of it which is second row of that element
And it would get width auto which would work perfectly
The width should be set with the padding and content. If an element is absolute make up the width of that with content and padding. If you absolutely have to set a width make sure to use fluid units like percentages or viewport units . When container queryās are fully supported itās gonna be a game changer.
Still recommend using clamp for the text with padding/margin in ems
Working with absolute elements is like hell
Itās true! Grid makes it a lot easier though
Yeah, I will use clamp for texts but i still didnāt figure it out well
Isnāt clamp() like min-size, increase-when-on-this-width/height, max-size?
You set the values through that website then assign the body size to body -> font size. Then for h1 use the largest, h2, the second largest etc.
oh
So
Kinda the second value in the clamp is the growth factor, itās like the preferred size
body {
font-size: 1em;
}
h1 {
font-size: clamp(2.5em, ???, 5em);
}
I must declare it on body?
So if I put 3em inside of clamp on h1, how will exactly it work?
I actually want to use pt for fonts 
but letās see
but letās seeI linked that utopia tool because it spits out a bunch of values you can use as custom properties in the root
No not ems on the clamp, use the clamp as the font size then use end for padding and margins so they shrink and grow with the font size
I actually still confuse on a part. How can we set rootās rem value to different value? Like 1rem = 16px but it can be changed?
Nonono pts are for print design. Using px or pt for font size is not accessible
Oh, i use pt for designing stuffs so yeah š
Itās not setting the roots font size, itās storing custom properties. The root is still 16px. I saw you were using custom properties so I thought you were familiar. Setting the pages font size comes from the body
No I am familiar with it but that was always been a question in my mind xd
Just donāt use them for web graphics or websites. Pts are okay in print design because itās being printed out.
I heard that we can change the rootās value so I wanted to ask āhow?ā
Root is just storing the properties so they are inherited down but itās still getting itās font size 1rem from the browser (16px).
Then whatās the difference between 1rem and 1em?
Some people set :root {font-size: 62.5%} which makes 1rem = 10px
Oh
Thatās what I was asking for
Thank you š
We can change rem but not em right?
Setting ems on font-sizes makes a cascading effect. So if you set body{ font-size: 16px } .container {font-size: 1.5em } then the font size in the container becomes 32px. .container h1 {font-size: 1em} now the h1 is 32px. Itās kinda hard to explain the cascade but the root sets the rem , defaults to 16px from the browser but for font-sizes end cascade from the parent
You can but you shouldn't. It's bad practice, and has a negative effect on accessibility
I see
Using padding and margins with ems looks at the elements OWN fontsize not the parent so itās able to be fluid when using clamp
if you absolutely have to, set it using % like this, but never ever under any circumstance set it using px on the root or html elements. It effectively tells people with vision problems to just fuck off and not use your site, because it doesn't let them adjust the font size.
My advice is to just get used to 0.125rem being 2px, the math from there is pretty simple and easy enough to memorize
Brb
This will prob explain better than I can typing on mobile
https://youtu.be/_-aDOAMmDHI?si=y4Szux3IB2S0NNaE
Kevin Powell
YouTube
CSS em and rem explained #CSS #responsive
A look at the CSS units EM and REM, how they work and when you might want to use one over the other!
First I take a look at some basic examples of both ems and rems, then move onto some more interesting things with buttons and a call to action, as well how we can take advantage of both the em and rem with media queries.
The way the em unit is ...
And setting font sizes in px and pts is inaccessible because it doesnāt honor the user style sheet settings or ability to zoom, do I have that correct ?
yes, exactly
Same with using viewport units as font sizes too
there's ways around that one (like including a
rem in calc) but yeahI love clamp it makes life so much easier
Trying to talk Op into it haha
āEm is inherited from parent, REM is inherited from :root to put it simply
Ems cascade so if body has font-size: 16px, then the next child .container uses 1em, at this point 1em=16px. Then inside of there .container-child, if you use 1.5em, font size is now 24px. Go inside that container .container-grandchild and use 1em, 1em now is equal to 24px.
While youāre learning you could just use
Just donāt set a font size on the root in production. Use the clamp in several custom properties then assign those to each text element. I donāt want to confuse you with a list of clamp custom properties. KPs videos will help too
So to sum up what we learned about responsive coding:
Set up custom properties with clamp, assign those as your font sizes
`body {font-size: var(āfs-body);}
h1 { font-size: var(āfs-lg);}
.small{font-size : var(āfs-sm);}
`
Use ems for padding and margins and gap whenever possible
Never set font sizes in pixels or pts (or any other fixed size) when coding for the web. This makes it inaccessible for the user. If not using clamp, use rems.
Never set fixed heights (!!!!) , avoid setting any kind of height; aspect-ratio can help. try to avoid setting any widths (the padding+content should make up the elements size) and if you must, make them min-widths or widths with responsive units like % , vw etc. when using grid, set the size of the cell and the element will fill it up. grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr) );
On grid, you donāt have to declare grid-column: span 1; , thatās the default. The less properties you set on the children, the less properties you need to reset or change in a media query.
Itās very rare for me to have to write a media query these days! All the tools are available to make it perfectly responsive and looking good!Okay so
Thanks for the website you sent, I will use it when I have free internet cause it is limited for now š
I will play with it later.
Although grid would be better than flex to me in my webpage, but unfortunately that aside element made me lazy so I just hidden it after making all my grids into flex boxā¦
But so far, the website still working as I expected. Only one thing is missing, which is clamping and resizing the image sizes. With absolute item on top of it (for user:neo > album-info) š„ŗ
https://neodevils.github.io/new-minesa/
I just have to play with padding and margin for the boxes, and itās all good to go
Images probably donāt need clamp , they should resize with the viewport/their container. Just opened on mobile and the images look good to me!
Thank you š