/    Sign up×
Community /Pin to ProfileBookmark

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

Hey Webdeveloper community,
I am designing a website mockup, and will attach an image of what it looks like currently. 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?

https://imgur.com/42bymQq
https://imgur.com/BqevVuQ

to post a comment
CSS

3 Comments(s)

Copy linkTweet thisAlerts:
@VITSUSADec 19.2018 — 
The web designer team of VITSPL can help you to solve this problem in smart way.
Copy linkTweet thisAlerts:
@NogDogDec 19.2018 — I think CSS Grid is a great way to go, but each grid template area box will need a unique name, so that the browser knows which one to stick any associated element into. So it might be that for this layout you have a separate grid template for each article layout, "read more" section, etc. Then each of those would just fall in place normally within the overall page layout (which would be its own top-level grid template).
×

Success!

Help @overground55 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 4.25,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...