Display grid | fr unit(flexible grids):

Code example for this content - Github

To use this css tool, we need define display in the parent container as grid.

.container {
    display: grid;
}

Unlike flexbox, this alone does not cause any changes to the container.

Is necessary define more grid-template-columns or/and grid-template-rows as attribute.

.container {
    display: grid;
    /* `fr` unit is to flexibly size grid rows and columns */
    grid-template-columns: 2fr 1fr 1fr 2fr;
}

The number of values will be the number of columns, the same goes for rows. You can see that we used fr unit, this is a flexible value that uses the available value for each item to fill the entire row.

Gaps between columns and rows

Code example for this content - Github

To add gaps between columns we use the properties column-gap, for gaps between rows we use row-gap, and to use it as a shorthand we use gap.

look examples:

.container {
    column-gap: 20px;
    row-gap: 20px;
}

as shorthand:

.container {
    gap: 20px;
}

The both block codes above does the same thing

NOTE The properties cited above can be used with the prefix grid-, for example grid-column-gap, grid-row-gap and grid-gap. The prefixed versions will be maintained as an alias, so they'll be safe to use for some time. To be on the safe side, you could bouvle up and add both properties to make your code more bulletproff:

.container {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-gap: 20px;
  gap: 20px;
}

Repeat function

Code example for this content - Github

To avoid repetition of values in properties, we can use the function repeat.

Look this example:

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

This code above is the same thing that:

.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

Explicit and Implicit grid

Code example for this content - Github

What's Explicit grid

The explicit grid is the one that you create using grid-template-columns or grid-template-rows.

What's Implicit grid

The implicit grid extends the defined explicit grid when content is placed outside of that grid, such as into our rows by drawing additional grid lines.

If you wish to give implicit grid tracks a size, you can use the grid-auto-rows and grid-auto-columns properties. If you add grid-auto-rows with a value of 100px to your CSS, you'll see that those created rows are now 100 pixels tall.

Look:

Minmax function

Code example for this content - Github

The minmax() function lets us set a minimum and maximum size for a track, for example, minmax(100px, auto). The minimum size is 100 pixels, but the maximum is auto, which will expand to accommodate more content. Try changing grid-auto-rows to use a minmax value:

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(100px, auto);
  gap: 20px;
}

Repeat columns with dynamic number

We can define number of columns to be dynamic using repeat with the first parameter auto-fill and second parameter with the size of the column, in this case is 200px - 1fr using minmax function.

Try to add it in your code and look the result, try change the viewport to see the number of columns be dynamic.

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-auto-rows: minmax(100px, auto);
  gap: 20px;
}

Line-based placement

Code example for grid-column - Github Code example for grid-row - Github

We now move on from creating a grid to placing things on the grid. Our grid always has lines — these are numbered beginning with 1 and relate to the writing mode of the document. For example, column line 1 in English (written left-to-right) would be on the left-hand side of the grid and row line 1 at the top, while in Arabic (written right-to-left), column line 1 would be on the right-hand side.

We can arrange the contents accordance with these lines by specifying the start and end line.

We do this using the following properties:

• grid-column-start
• grid-column-end
• grid-row-start
• grid-row-end

These properties can all have a line number as their value. You can also use the shorthand properties:

• grid-column
• grid-row

To use the shorthand specifying the start and end lines, we separated by a forward slash /.

Look this example changing the grid-row and grid-column of the aside in this example.

aside {
    grid-row: 1/3;
    grid-column: 3;
    background-color: blue;
}

Look that the row was defined to start in the first position and to end in the third position(last in this case), and column defined in the third position.

Grid template areas

Code example for this content - Github

A way to arrange items on own grid is to use the grid-template-areas property.

To use this property, we need define in the parent container this property with design name that we will define each child element.

Look this beautiful example:

.container {
    display: grid;
    gap: 20px;
    grid-template-columns: 1fr 3fr 1fr;
    grid-template-areas:
    "navbar navbar navbar"
    "header header header"
    "sidebar-left content sidebar-right"
    "footer footer footer";
    background-color: #000000;
}

nav {
    grid-area: navbar;
    background-color: #a4cbf3;
}

header {
    grid-area: header;
    background-color: #86ee82;
}

article {
    grid-area: content;
    background-color: #b382ee;
}

aside:first-of-type {
    grid-area: sidebar-left;
    background-color: #eecf82;
}

aside:last-of-type {
    grid-area: sidebar-right;
    background-color: #eecf82;
}

Basically, the position that we defined in the grid-template-areas property, will be applied to all child elements that contain grid-area property according to the design name.

In this example, I think fascinating you change the grid-template-areas and grid-area changing positions of elements or adding a new element, you can use my example!

The rules for grid-template-areas are as follows:

• You need to have every cell of the grid filled.
• To span across two cells, repeat the name.
• To leave a cell empty, use a . (period).
• Areas must be rectangular — for example, you can't have an L-shaped area.
• Areas can't be repeated in different locations.

Thanks for reading! Any feedback is welcome.