Early grid-like layout exploration

For most students, their first instinct is to put their list of projects in a grid.

So many things are listed like that. So, it’s a pretty normal pattern to try and emulate. But instead of working with the few tools we have (at the start of the course) – they sometimes copy another website’s code, search the web for “make a grid,” or – look at their fellow student’s code. (the last one is preferred)

They’ll find some code. And paste it in.

(But they’ll know that they don’t really know what it does)

Would you put something in your mouth – if you weren’t really sure what it was?

It looks like a grid! They did it!

Then this happens.

They didn’t start with the small screen first.

That’s where the majority of viewers will see it as of 2020. But – at any moment – our brains could get hooked into “the system” – and small screens could be gone – and back to a full field of vision type of interface. Either way — building – from a small-screen-first approach – is the way to go.

This is currently totally broken. And of course – the student will want to “fix it” and “make it work right.” Instead of fixing the broken thing – it would make more sense to build it properly – and with tools we currently know and understand.

It would be best to just remove anything we haven’t talked about – and get back to basics.

The website didn’t start out broken.

We talked about “resetting” our CSS, but people tend to forget to – use it.

There might be a big area on the left. and sometimes people will do very complicated things to try to “fix it.” However, it doesn’t need to be fixed. It’s just the natural way that lists are styled to make room for the numbers. If you want to change it, then you can set margin: 0 and padding: 0 OR use the reset.

However, it doesn’t need to be fixed. It’s just the natural way that lists are styled to make room for the numbers. If you want to change it, then you can set margin: 0 and padding: 0 OR use the reset.

This will get things back to a nice normal “readable stuff on the page” situation that everyone knows and loves.

But it’s a little tight on the left (and right). Why is that?

You might have a reset – and not be aware of it. Or none. Or have just a few properties set that reset a few specific things – that maybe you aren’t fully comfortable with. So, – keep it simple. Know what it set to what – at a base level. (that’s why the reset is so great)

You can set the body or the section or whatever to have some padding – on purpose. Be in control! At least when you’re building websites.

You really have to make use of the limited space. Maybe just borders in-between and not on the sides.

When it going to start to look bad? This certainly doesn’t look so hot. But the most important thing – is the small screen!

So, what are you going to do about this?

Right now, the <li> are all stacked on top of each other. That’s pretty standard. They are display: block. They stack on top of each other and span the width of their parent element.

Here’s one way to make a decision about the layout.

With an @media rule, you can check a condition and apply some rules – only if that condition is true. It’s a rule for rules.

note: if you are zoomed in or out a lot – that’s going to change the situation. And the conditional rules might not kick in when you expect.

So, if you want things to not be stacked on top of each other – then you have some options. There are inline, inline-block, and block display types. So, if you set the list items to be display: inline-block, then – they’ll have the ability to have padding like a block element- and also to go – in a line – like an inline element.

If you set them to be 50%  width (of their parent, right?) – then maybe they’ll act like a grid of items.

Sometimes things don’t behave as you expected. And that’s OK.

Remain calm. There is a reason. And you CAN figure it out.

It’s supposed to be 50% – and it is. It is 50% of the parent’s width. But it’s also got the padding and the border size added to that 50%. So, 50% + 20px + 10px * 2 = more than the space available. It just doesn’t fit. So, it drops down to where there is enough space. It’s not what you want, but it is pretty smart.

So, – you should know how to deal with that by now.

But there’s also another whacky situation that you’ll probably be unaware of. For some reason… there’s a little tiny gap between inline-block elements that throws things off. Boring story.

So, – if there’s a rogue little space… maybe trying 49% might work? It does! (don’t worry – you won’t be doing it like this long-term) (this is more about learning how to work with the tools you have)

But – “why is it aligned like that?”  “It doesn’t look right.”

There are defaults for all of the properties. No one tell you that! For example, in this case – vertical-align can’t just be set to “nothing.” It has to have some value at all times. What would “vertical-align: none” mean?

It just so happens that the default value is vertical-align: baseline

You can try middle and top to see how it goes. See how the blocks wrap and carry down the page just like words in a sentence?

But they are all different heights. Why aren’t they the same. Well – the fact is – they are different sizes. They have different amounts of content. Just like in real life… you can’t fit your car in a shoebox. And some things are just bigger or smaller than other things. Crazy, right?

You could try out a minimum height on it or something.

And hey, while you’re at it: You could add yet a second break-point to split the items into thirds.

It’s not fool-proof, but it works OK.

What about space in between them? What about some of the details?

Adding margin – seems to add space – and then it breaks out percentages. You could lower the percentage and then add some percentage margins. It will get tricky though. (but you should try it anyway for fun)

But just adding 20px margin to anything as a form of spacing – isn’t the way to go. Margin is for pushing things away from each other.

Instead of using the list-item itself as an element to style: what if you just let it be a structural element. Instead, you could create a component that exists inside the list item. This is a separation of concerns. You have a list – and you have a card. The cards go in the list. The list defines the grid. The card defines the card. They are composable components of their own.