In this article, we will learn about the Grid in CSS.

CSS Grid

The Grid Layout in CSS excels at dividing a page into major regions or defining the size, position, and layer relationship between parts of an HTML primitive control.

A Grid layout like a table, allows an author to arrange elements in columns and rows. With CSS grid, however, many more layouts are either possible or easier than with tables. For example, like CSS positioned elements, the child elements of a grid container could position themselves so that they overlap and layer.

Important terms in Grid

Grid Container

The element on which the display: grid property is applied is the Grid Container. It is the parent of all the containing items.

Grid Item

The direct child of the grid container is known as the grid item. remember that the item in the container is a grid item, but the sub-item isn’t.

Grid Line

The grid’s structure is made up of dividing lines which are known as the grid lines. They can be vertical (“column grid lines”) or horizontal (“row grid lines”), and they can be found on either side of a row or column.

Grid Cell

The space between two adjacent grid lines in a row and two adjacent grid lines in a column. It’s just one of the grid’s “units.”

Grid Track

The area between two grid lines that are adjacent. You can assume them as the grid’s columns or rows.

Grid Area

The entire area encircled by four grid lines is known as grid area. Any number of grid cells can make up a grid area.

Special units and functions in Grid

fr units

fr units are the fractional units in CSS and we use them to assign a portion in the remaining space. like if you give columns 1fr, 2fr, and 2fr, they will be separated as 20%, 40%, and 40% of the screen size.

Sizing keywords

When sizing rows and columns, we can use all of the standard lengths, such as px, em, percent, and so on, but we also have the option of using keywords:

• min-content: the content’s smallest size. Consider a line of text like “The best website to learn to code.” The min-content is probably equal to the width of the word “The.”
• max-content: the content’s maximum size. Consider the preceding sentence; the max-content is the total length of the sentence.
• auto: This keyword is similar to fr units, except that when allocating the remaining space, they “lose” the sizing battle to fr units.
• fit-content: fit as much content as possible into the available space, but never less than min-content or more than max-content.
• fractional units: as above.

Sizing Functions

The minmax() function does exactly what it says: it sets a minimum and maximum length for the string. This is particularly useful when used in conjunction with relative units. You might want a column to be able to shrink only so far. This is extremely helpful, and it’s most likely what you’re looking for.

The repeat() Function and Keywords

The repeat() function is used to save some lines of codes. as you can write repeat(10, 1fr) in place of writing 1fr 10 times.

When used in combination with keywords, however, repeat() can become quite fancy:

• auto-fill: Fill a row with as many columns as possible, even if they are empty.
• auto-fit: Fits as many columns as possible into the available space. Empty columns are preferable to expanding columns for filling space.

Subgrid

Subgrid is a very useful feature of grids that allows grid items to have their own grid that inherits the parent grid’s grid lines.

This is currently only supported in Firefox, but it needs to be implemented everywhere.

It’s also beneficial to be aware of display: contents;. Although this is not the same as subgrid, it can be a useful tool in some cases.

That’s the basic concept and terminologies of Grid in CSS.

We will learn about the properties of the Grid in the next article.

You may also like: Transform in CSS | Web Development.

Hope this article will guide you to recognize the basics about the Grid in CSS and still if you have any problem or queries regarding this, post them in the comments section and we will be glad to assist you.