CSS Grid Layout Approach Reccommendation For My Home Page Blog Design

HTML & CSS
1

Hi from 14 degrees C its like bloody Autumn York, UK

Ive been looking at these tutorials to help me re create my home page blog layout:

Here is my design:

1024×800 452 KB

I like the look of “Method 3: Using Table Display”. Am i right in thinking this would be an ok method out of the listed to follow?

Thanks in advance,
David

2

It depends on how you imagine this scaling down on smaller versions :). Could we get a screenshot of how you imagine this scaling down? Or just tell us?

3

Hi Ryan & thanks for the reply :slight_smile: I’m second guessing you’d like to see a mobile version of the layout and desktop then?

Ok well bit out of my depth here (and may get this totally wrong) but i like how the codepen behaves. Specifically the 1/4 columns, they sit 4 across then fit under each other in the mobile view port size, this is what i want but of course i have pictures in my design.

So am i ok to go head with the tutorial detailed in Method 3 and in the above codepen?

Thanks,
David

4

Well that’s fine and dandy, but yours is a 2 row 3 column setup. Using display:table would mean two rows of this.Which means if you are fine with it going from that to stacking 1 at a time, then that’s fine. If you envisioned a 2 column setup as you get smaller (e.g. 2 images in a row), then you can’t do that if you follow your images structure. Other than that, it’s fine.

5

@RyanReese will want to see a single responsive layout :smile:

I like display: table for single row layouts, but it can be inflexible with multi rows.

6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.