Perfecting the Grid Structure

HTML & CSS
1

I turned my code into grid, using the Grid layout structure to formulate this version of the code.

I’m sure it can be improved further beyond this.

If you see anything I need to fix, please let me know.

Can this be improved any further than this?

Specifying margin is no-longer needed in the code.

.nav {
  display: grid;
  grid-template-columns: 50px 50px 50px 50px 50px;
  grid-column-gap: 4px;
  grid-row-gap: 12px;
}
2

You can combine those column and row gaps together:

  grid-gap: 12px 4px;
1 Like
3

You have lots of repetition on the template column.

You can use the repeat command to remove that repetition

/*grid-template-columns: 50px 50px 50px 50px 50px; */
  grid-template-columns: repeat(5, 50px);

;

4

What happened to this?
grid-template-columns: repeat(5, 1fr);

5

That works, too, but I’m going to explore some options with 40px sized boxes, because I want to find out if the width and height can be automatically worked out.

6

What do you mean?

7

I removed all size from the boxes, so that as few assumptions are required at all.

.nav {
  height: 100%;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-gap: 12px 4px;
}

The boxes take up the full space available, with the columns and rows being specified as being 5x3.
The grid-gap lets you easily adjust the size of the gap between the boxes, which results in a very flexible layout that is easy to adjust to your needs.

8

Details on the different justify and align options for grids are gone through in the Bonus: justify-content and align-content presentation.

9

Would this:
grid-template-rows: repeat(3, 1fr);

Be the equivalent of this?
grid-template-rows: 50px 50px 50px;

Or is it this?

grid-template-rows: 50px 50px 50px 50px 50px;

10

No it wouldn’t. One allows the row height to be flexible depending on what’s available, and the other forces things to be a certain size which mostly gets ignored if it can’t fit.

11

I’m making notes.

How would this look in long form?

grid-template-rows: repeat(3, 1fr);

12

It would look like this:

grid-template-rows: 1fr 1fr 1fr;

which divides the area up in to 3 sections (fractional units), giving 1 unit to each section.

If it was instead:

grid-template-rows: 1fr 2fr 1fr;

that divides the space into 4 sections, giving 2 of them to the middle section.

13

1fr 1fr 1fr is the same as 33% 33% 33% but with better accuracy.

14

This: Long form
grid-template-columns: 50px 50px 50px 50px 50px;

Equals this: short form

grid-template-columns: repeat(5, 50px);
grid-template-columns: repeat(5, 1fr);

What would the long form of this be?
grid-template-rows: repeat(3, 1fr);

15

grid-template-rows: 33% 33% 33%

16

Yes.

And no.
5 fractional units is instead equal to 20%, not 50px.

In long form that is:

grid-template-rows: 1fr 1fr 1fr;

Do you see how 1fr has been repeated 3 times? That’s the same as repeat(3, 1fr)

17

Now let’s use this to convert the % to a px value.
https://percentagecalculator.net/

I was shown how to do it here:

18

Forcing things to pixel values removes all flexibility, and is the opposite of what CSS is designed to do.

1 Like
19

How would you figure it out though?

I want to know how you would figure out the math, that’s all.

20

Which percentages do you want to figure out?