html

Grid Gap CSS

In a grid layout, the grid-gap attribute specifies the size of the space between rows and columns. When we want to set the size between the row and the column in a grip-type layout, we use this “grid-gap” property in CSS. We can also set the “grid-column-gap” and “grid-row-gap” separately. Or, we can use the “grid-gap” property which will set both the grid-row and grid-column space. We can also say that the “grip-gap” is the shorthand property of both the “grid-column-gap” and “grid-row-gap” properties. The “grip-gap” property will set the given space between the rows as well as the columns of the grid. We can set the value of this property in “px”, “%”, or “em”.

In this tutorial, we will use this “grid-gap” property in CSS and will explain to you the “grid-gap” concept in detail along with different examples.

Example # 1:

We’ll begin with our first example by creating a new file in the software, Visual Studio Code. When we create a new file in Visual Studio Code, we may choose the language and we select HTML. The HTML code must then be created. Visual Studio Code allows us to instantly acquire the fundamental tags by entering “!” and then clicking “Enter.” So, we’ll take benefit of this capability and collect all of these fundamental tags. In the HTML head tag, we provide a link to the CSS file. We are going to create a heading and then put a paragraph below this heading. Then, we create a main div class with the name “grid-container” and put seven other div classes inside this main div. We are giving different names to all divs such as “item1” for div class 1, “item2” for div class 2, and so on.

We are utilizing the “text-align” property for the “body” and aligning it to the “center”. Then, we choose “green” as the heading’s “color” and also put the “underline” for the “text-decoration” property. The family of the font is “Algerian”. The paragraph’s “font-family” is “Times New Roman”. The “font-weight” is “bold” and “maroon” the “color”. The “font-size” we are setting here is “20px” for the paragraph and also “italic” the font of the paragraph.

Now, we are going to set the main div named “grid-container”. For this, the “display” we use is the “grid”. Then, we have the “grid-template-column” property which is used for specifying the number of columns inside a grid. We put “auto auto auto” as the value of this property which means the column’s size is set according to the container’s size. Here, we have three columns in this grid layout.

Now, we are setting the “grid-column-gap” and “grid-row-gap” separately. The “grid-column-gap” we are setting is “40px” and the “grid-row-gap” is “20px”. The “background-color” of the main div container is “orange” and the padding we use here is “10px”. This padding property is utilized for generating the space around the content.

Now, we are going to set the “div” of the “grid. container” which represents all the divs that are present inside the main div. We are setting the “background color” of the divs to “white” and the text which is written inside these is aligned in the “center”. After all these, we have the “padding” property in which we set the top and bottom padding to “20px” and the left, right padding is “0”. The size of the font which is written inside these divs is set to “30px”. Now, look at the output screenshot below this code.

Here, the gap or space between the rows is “20px” and the space between the columns is “40px” in the given screenshot.

Example # 2:

In this example, we have eight divs inside the main div “grid-container”. We will apply the “grid-gap” property to this code which is the shorthand property on “grid-column-gap” and “grid-row-gap”. We will set both the column gap and the row gap inside this one “grid-gap” property.

We use the “color” of the heading as “orange” and “text-decoration” is set here to “underline”. Also, the “font-family” is “Algerian”. Then, we set the “grid” for the “display” property and in the “grid-template-column”, we are using four “auto” so we will get four columns in the output.

After this, we have the “grid-gap” property in which we set the size of the space in “%” for the columns and rows of the grid. We set it to “5%”, so it will create space of “5%” between the columns and “5%” between the rows. We utilize the “background-color” to the “light-slate-grey” and the “padding” is “10px” for this “grid. ontainer”. We apply the “background-color” to the other divs in “rgba (122, 240, 122, 0.8), which is “light-green” and also, we have a “0.8” alpha value, so it shows some transparency.

We align the text in “center” and the “padding” for the “top” and “bottom” is “20px” and “0” is for the “left” and “right” padding. The “font-size” is “30px” in this code.

In the given screenshot, there are four columns and the space between the rows and columns is “5%”, as we have set this in the “grid-gap” property.

Example # 3:

Here, we have twelve divs in this example and we will apply the “grid-gap” property on these. Also, we will set the value of this “grid-gap” property in “px” in the CSS code.

For the “body”, we use the “text-align” attribute and fix it to “center”. The “font-style” is “italic”. Then, we add the “grid” value for the “display” property. We use four “auto” in the “grid-template-column” property to get four columns in the output. After that, we have the “grid-gap” property, which allows us to specify the size of the space in “pixel” for the grid’s columns and rows. We set it to “50px”, which means there will be “50px” of space between the columns and “50px” between the rows. The “background-color” is set to “pink”. Also, we create a “border” for this main div which is set to “1px solid black”.

Here, we have “10px” of the “padding”. Now, we are setting the “background-color” of the inner divs in “rgba” format and set it to “rgba (204, 90, 90, 0.8)” which shows transparency for this color. The transparency value here is “0.8”. The “padding”, the “font size”, and the “font-family” is the same as we have used in the above examples.

This shows that we have four columns in the output and also the space between the rows of the grid and columns of the grid is “50px” here.

Conclusion

The objective of this tutorial is to help you understand how to utilize the CSS “grid-gap” property. In this tutorial, we’ve looked at the CSS “grid-gap” property and described what the “grip-gap” property means, why we use this property, how to use this, and how it returns the output. The usage of the “grid-gap” has already been discussed here. We have explained this property that we used for setting the size of space between the rows and columns of the grid. We’ve also shown examples of how to use the “grid-gap” property, as well as the results of all of the examples in this tutorial.

About the author

Aqsa Yasin

I am a self-motivated information technology professional with a passion for writing. I am a technical writer and love to write for all Linux flavors and Windows.