Mikke.Learns

Coding log: 05.09.19

May 8th, 2019

First day of learning CSS grid!

I had heard about Flex Box before I did the challenges on fCC, but I have actually never tried CSS Grid. So this will be exciting. I am not sure what the difference is between Flex Box and CSS Grids.

We turn an HTML element into a grid container by setting its display property to grid:

display: grid

This is the same as Flex Box, but in this case, the parent container is referred to as the container. The children are called items.

grid-template-columns

After defining the container, we also need to define the structure of the grid inside it. To do this we use:

grid-template-columns: 50px 50px;

This divides the grid into two columns that are 50px wide each. The number of parameters indicates the number of columns in the grid, and the value of the parameters indicates the width of each column.

grid-template-columns

It’s the same with grid-template-rows as with grid-template-columns. The number of parameters indicates the number of rows, and the value of the parameters indicates the width of each row.

grid-template-rows: 50px 50px;

Units

We can use both relative and absolute units like px and em in CSS Grid to define the size of rows and columns. We can also use:

  • fr: sets the column or row to a fraction of the available space

  • auto: sets the column or row to the width or height of its content automatically.

  • %: adjusts the column or row to the percent width of its container.

grid-template-columns: auto 50px 10% 2fr 1fr;

In this example, we create five columns. The first one is as wide as its content. The second is 50px. The third is 10% wide relative to the container. The two last columns are divided between the remaining space. Column five takes up twice as much space as the sixth.

Gaps

column-gap is used to create a space between the columns in the grid container:

grid-column-gap: 20px;

To create gaps between rows, we use:

grid-row-gap: 20px;

To add gaps faster, we can use the shorthand grid-gap. If it has one value, it will create a gap between columns and rows. If it has two it will use the first one to create a gap between rows, and the second value for columns.

grid-gap: 10px 20px;