Perfecting the Grid Structure


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;


You can combine those column and row gaps together:

  grid-gap: 12px 4px;


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);



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


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.


What do you mean?


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.


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


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;


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.


I'm making notes.

How would this look in long form?

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


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.


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


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);


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



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)


Now let's use this to convert the % to a px value.

I was shown how to do it here:


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


How would you figure it out though?

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


Which percentages do you want to figure out?