Mikke.Learns

Coding log 05.12.19

May 11th, 2019

The fourth day of learning CSS grid.

Yesterday I learned about justifying and aligning items in the grid, and about creating template areas. The grid-area can also be used in another way. If we don’t have any areas template to reference, we can generate one on the fly:

item-5 { grid-area: 3/1/4/4; }

In a 3x3 grid, this will place item 5 at the bottom, starting at horizontal line 3 and vertical line 1. It ends at horizontal line 4 and vertical line 4. So it stretches across the bottom of the grid.

Repeat function

To avoid writing to much repeatable code, we can use the repeat function. Just imagine creating a grid with 100 rows and insert 100 values individually.

By using the repeat function we can specify the number of times we want the column or row to be repeated. We follow up with a comma and the value we want to repeat:

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

In this example, we get three rows of equal height.

We can also repeat multiple values, and combine the function with other values:

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

minmax function

We also have access to another function in CSS Grids, called minmax. It lets us limit the size of items when the grid container changes size:

grid-template-columns: 100px minmax(50px, 200px);

This example is set to create two columns. The first one is 100 px, the second has a width of minimum 50px and maximum 200px. This can also be combined with the repeat function above:

grid-template-columns: repeat(3, minmax(90px, 1fr));

auto-fill

auto-fill is a great option used in the repeat function. It allows us to create fluid layouts by automatically inserting as many rows or columns as possible depending on the size of the container. If we combine auto-fill with minmax, we can create nice flexible layouts.

repeat(auto-fill, minmax(60px, 1fr));

When the container changes the size, the example above keeps inserting 60px columns and stretching them until it can insert another one.

auto-fit

auto-fit works almost the same way as auto-fill. What separates them is that when the container’s size exceeds the size of all the items combined, auto-fill keeps inserting empty rows or columns and pushes our items to the side. auto-fit, on the other hand, collapses these empty rows and columns and stretches the items to fit the container.

grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));

So with auto-fit, there will never be empty space even though the container exceeds the size of the items.

If we combine all the methods in CSS Grid with media queries we can create responsive and fluid layouts. We can also create grids within grids by setting display: grid on items in an already existing grid.

And that concludes the CSS Grid challenges on fCC.