Perfecting the Grid Structure


#1

I turned my code into grid, using the Grid layout structure to formulate this version of the code.
https://jsfiddle.net/r8v3m1k1/138/

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;

#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.

https://jsfiddle.net/r8v3m1k1/163/


#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.


#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?