Css Grids Basics part1

In this post, we will learn about all the CSS grid properties to build easy and some less easy layouts. We will define everything then we will dig a little deeper to see what we can achieve with CSS grid.

But before we start I would like to address some concerns that you might have, as well as making sure we are familiar with the basics of CSS grid and its terminologies

Does CSS grid replace flex-box?
Well, CSS grid does not replace flex-box. They are two different tools for different purposes. Actually, they work very well together, we can have a flex display inside a grid display and vice versa..

What are the differences between CSS grid and flex-box?
There are a lot of differences, but the main one is that flex-box is a one-dimensional layout system whereas CSS grid is a two-dimensional layout system.

Basics:

Basically, a grid could be broken down to two elements: the grid container and the grid-items.
the grid container is a set of columns and rows. A row is a space between two consecutive row-lines (horizontal lines) and a column is a space between two consecutive column-lines (vertical lines). A row could be called a track, and the same goes for a column. So a grid track is a space between two parallel grid-lines.

Each track could have one or multiple grid cells. The grid cell is the fundamental grid unit as it is the smallest one. It is the space between four intersecting grid-lines. If we combine multiple grid cells together we have a grid area. It is important to mention that a grid area must be rectangular, we can not have a T shaped grid area for example.

The grid-lines start from 1 to the number of lines you explicitly or implicitly defined. The last number of grid-line could be referred to as -1, the grid-line before it as -2 and so on. This will come handy later.
In the Figure 1.2 the number of column-lines goes from 1 to 6 (of from -6 to -1) and the number of row-lines goes from 1 to 5 (or -5 to -1).

The number of grid-lines is considered explicit if you explicitly set it in your CSS. And it is considered implicit if it is set by the browser dynamically.
Finally, the grid cells could be separated by a space or a gap. Those gaps are called gutters, but we generally refer to them as gaps :).

CSS grid basic properties:

Display:

A CSS grid is defined using the grid value of the display property.
syntax: .container { Display:Grid;}

Rows & Columns

We can define columns and rows on your grid using the grid-template-rows and grid-template-columns properties
syntax: .container {
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr auto 2fr;
}
Or we can use grid-template where we first define the grid-template-rows then the grid-template-columns (separated by a slash):
.grid-container {
grid-template: 1fr auto 2fr / 1fr 1fr 1fr 1fr;
}
By the way an fr is a fractional unit, so 1fr is for 1 part of the available space.

Repeat function

The repeat() function represents a repeated fragment of the track-list.
So we could achieve the same template as above like this:
.grid-container {
grid-template: 1fr auto 2fr / repeat(4, 1fr);
}

Minmax function

The minmax() CSS function defines a size range greater than or equal to min and less than or equal to max.
We can use it with repeat() like this:
.grid-container {
grid-template-columns: repeat(3, minmax(100px, 1fr));
}

Gaps

We can add gaps between the row-lines by using row-gap, we can do the same between column-lines using column-gap:
.grid-container {
row-gap: 5px;
column-gap: 10px;
}
Or we can use gap where we first define the row-gap then the column-gap:
.grid-container {
gap: 5px 10px;
}
If the row-gap is the same as the column-gap, we can specify only one value.

The grid items

To specifies a grid-item’s start and end position within the grid we basically use four properties. Let's have a look at their definitions.

grid-row-start:

The grid-row-start CSS property specifies a grid item’s start position within the grid row by contributing a line, a span

grid-row-end:

The grid-row-end CSS property specifies a grid item’s end position within the grid row by contributing a line, a span

grid-column-start:

The grid-column-start CSS property specifies a grid item’s start position within the grid column by contributing a line, a span

grid-column-end:

The grid-column-end CSS property specifies a grid item’s end position within the grid column by contributing a line, a span

Or we can use the shortened version of these properties:
syntax:* .container {
grid-row: start end;
grid-column: start end;
}*

That's all for today I'll share more in my up comming posts . Thanks for reading.

Comments

[Temani Afif]

mostly taken from morioh.com/p/84c9534016ba