Is 'grid-template-areas' a good way to build this website?

[overground55]

https://imgur.com/42bymQq

https://imgur.com/BqevVuQ

Hey css-tricks community,
I am designing a website mockup, and have attached images of what it looks like currently, above. I am fairly new to web design, but have a basic grasp on what can be done. I’m attempting to use CSS Grid to design my homepage. From here I really have 2 questions:

First, my home page seems fairly long, at least compared to websites shown in tutorials I’ve found on CSS Grid. It seems like ‘grid-template-areas’ may be one way of building my home page. Will this become overly complicated and a less effective way of building something that looks like what I’m currently showing in my attached image(s)? The way I’m picturing it is that my ‘grid-template-areas’ will end up looking like this:

‘header header header nav nav’

‘article article article article article’

‘article article article aside aside’

‘article article article article article’

‘aside aside aside aside aside’

‘article article article article article’

‘aside aside article article article’

‘article article article article article’

‘article article article article article’

‘article section section section article’

‘footer footer footer footer footer’;

I’m uncertain if I’m using the right semantic language for everything, but I will also overlay each ‘grid-template-area’ item on my website mockup so you can see exactly what I have imagined in my mind. I hope I have provided enough information for someone with more experience to help me here.

Secondly, some of my imagery, such as the header, footer, and a few other images, touch the edge of the webpage. In the past when using CSS Grid, I couldn’t get the grid to go all the way to the edge of the screen, but it had a small margin that seemed inherent. How can I avoid this from happening when I begin the html/css process?

[Paulie_D]

Start with a simple basic layout attempt in Codepe.io. and show us some minimal code of the issues you are seeing.

I’m not a fan of grid-template-area myself they seem too restrictive but they do have their uses.

Also your suggested layout seems to have non-contiguous template areas of the same name and that’s not possible. All template areas are rectangular and unique…you can only use the name once.

Anyway, show us your first minimal attempt and we can help further.

[Author]

Posts