Should it all be grid?
Hey Guys! I am learning and creating my very first website for my family's company. As you can see on the image attached, the whole website has a fixed column based on the logos's width (making the layout like two columns). I am wondering if the whole website should be grid or only the specific sections? Thanks, Andrew
7 Replies
By default HTML block-level elements (div, section, main, article, header, footer, etc) are all one-column. Because of this you’ll get no real benefit to putting them in a grid container.
But the layout through the page has “two columns” based on the width of the logo HAVALDA and CONSTRUCT
Oh, crap, I missed that bit. My bad! So in that case yes, you should do a two-column grid on the site.
My only concern is responsiveness for small mobile screens. I'm hoping you're using a
clamp() function for the font size so it'll grow/shrink based on the viewport. And at small enough viewport size it might be a good idea to transition from grid to flex, have each "grid area" be offset so to keep the grid feel alive while not being a "simple" single-column layout.Thank you so much!!☺️ May i ask if you have some good video recommendation for a relevant grid layout project like this?
Here's a minimal working example from your image
https://codepen.io/c__beck/pen/LYXyMKy
You'll want to play around with the sizing of various elements, but the skeleton is there.
Basically what I did was to make all the children of
main into grid containers with the same grid column layout (7fr 9fr based on the 7 & 9 character length of the words you're using to set the grid). Because I used fr the grids are the same size all the way down. Having each container be its own grid layout also made it easier to set a background image on the section below the nav bar.
On smaller screen sizes display: grid is replaced by display: block, so they're block-level elements that stack one atop the other. I then set the size of each to be 70% and used the tick-right class to push the right-side "columns" to the right.Thank you so much, you are a genius! I am honestly really grateful!🙏🏼🙏🏼
Hope it helps! 😁