Grid help, mobile first design

HTML-CSS
#1

Here’s my page

I decided to try doing the mobile design first then moving onto the main grid desktop view but it seems more compliated.

What’s going on with my grid, why aren’t they all sitting nicely in 1ft columns? The boxes are also overlapping eachother.

I realy want to get into a pattern of learning to do mobile first but getting annoyed at this ha! Usually I can do grid basics fine but doing mobile first has confused me. Am I focusing on the right containers? Is my main grid the correct container (section)?

my mobile finishes at @media screen and (min-width: 620px). Which is where I want to use grid.

Bonus question: For a simple design like this, shoud I be using grid for the mobile screen so I can cleanly transform it to the desktop view?

Cheers

desktop-design
desktop-design1440×900 123 KB

#2

I don’t understand your issue, they are nicely in a single column

image
image500×609 48.3 KB

#3

Thats the mobile design done, now I want to change to a ‘desktop view’ at a min-width of 620px. This view will be done in a grid layout as in the photo.

The problem is I’m now not sure where to apply the container or the individual grid items; Each profile card is surrounded an article, do I add a class and use this as the grid?

#4

you should add display: grid to the overall container, not to each card

inside .jonathan-greed selector you have a syntax error

also they are all squished together because you have given a fixed heigth to each row

maybe something like template-grid-area would work better for what you want to do

#5

Thanks.

It’s just annoying because here’s the page when I done desktop first not perfect but the basic CSS worked, now I’ve done the mobile first it’s just confused me.

I could use grid areas but I need to know what the page isn’t doing what I want. I have my maind grid container now (div) to control each individual box, where is best to place the display grid i.e the article containers?

**I’m going to re-read/watch some more CSS grid guides. Web dev is hair pulling stuff ha.

#6

so yoo also want each article to have a grid inside?

you need to put display: grid only on what should contain the grid

#7

Thank you, please look at my quick example so I can explain better.

This is how I want my original project to be, when I give them a row/column they move to that row/column. Whereas my original project they’re staying in their 100% wide blocks.

I’ve given display:grid to a main container and to the articles but the profile cards don’t resize or budge. I’m assuming this is to do with my styling of them in mobile first rather than doing grid firsrt then mobile. (and of course my bad useage of display:grid on the wrong containers)

I apologise for making this super convoluted.

#8

You are on the right track. Your narrow design works great, now you just need to add the grid layout for your wider design. Right now you are setting display: grid on div.grid-container but the articles are wrapped by a section. So you either need to get rid of that section or set the grid layout on the section instead.

1 Like
#9

How about using grid-template-areas? it may be useful in this situation.

1 Like
#10

Thanks bbsmooth. You helped on the other page, I’ve been trying to dissect your layout!

I see you had a div container for the main container but I couldn’t find what you applied for sub containers. [edit] apologies, I now see you had the section outside of the container. (I have it inside!) :slight_smile:

It’s working now. I just have to sort out my template measurements but everything is moving on cue.

Cheers.

#11

Will give it a shot.