Submitted about 1 year ago

Newsletter landing page using CSS Grid Basic HTML and CSS only

Nylle Griffiths•130

@nyllegriffiths1

Preview site View code

This is a solution for...News homepage

HTML
CSS
JS

2junior

Design comparison

SolutionDesign

Solution retrospective

So i know this isnt the best solution this was my first time using CSS Grid, so one thing is how do i posistion the containers better, if you look at the challenge compared to my solution the bottom doesnt really align and i couldnt figure out how to expand my bottom row all the way across, so if someone could explain this or advise me on how to make it better i would really appreciate this.

i didnt use any frameworks or libaries because at the momemt i was just want foucs on getting my confidence up in the basics, loving this journey so far.

Community feedback

m1mmseen•460
@m1mmseenPosted about 1 year ago
You should try to nest the css grids. For example an outer grid like: display: grid;

grid-template-areas: bigPicture bigPicture asideContent’

‘title textWithButton asideContent’

‘bottomContent bottomContent bottomContent‘

then you can set the area to a css selector for example:

.myDiv { grid-area: buttonContent;}

you can now style the content inside this div for example like usual.

For the bottom content you can try: display: flex;

flex-direction: row;

justify-content: space-around; (or just play around with the other “space-“values

align-items: center;

Always think about the properties of the parent. They can cause unexpected behavior of the childs!

Or you can nest another three column grid inside the bottomContent row.

See also the short but good documentation here on W3schools
Marked as helpful
0

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord