CSS Grid
A grid can be defined as an intersecting set of horizontal lines and vertical lines. CSS Grid layout divides a page into major regions. It defines the relationship between the parts of a control built from HTML primitives in terms of layer, position, and size. Grid property offers a grid-based layout system having rows and columns. It makes the designing of web pages easy without positioning and floating.
Like the table, it enables a client to align the elements into rows and columns. However, in contrast with tables, planning a layout with the CSS grid is simple. We can characterize columns and rows on the grid by utilizing the grid-template-rows and grid-template-columns properties.
The CSS grid property is upheld in browsers, for example, Google Chrome, Internet Explorer, Firefox, Safari, and Opera.
Grid Container
We can characterize the grid container by setting the showcase property to the grid or inline-grid on a component. A grid container contains grid elements that are placed inside rows and columns. Let's see a simple example of a grid in CSS.
Example
<!DOCTYPE html>
<html>
<head>
<style>
.main {
display: grid;
grid: auto auto / auto auto auto auto;
grid-gap: 10px;
background-color: black;
padding: 10px;
}
.num {
background-color: grey;
text-align: center;
color: white;
padding: 10px 10px;
font-size: 30px;
}
</style>
</head>
<body>
<div class = " main " >
<div class = " num " > One </div>
<div class = " num " > Two </div>
<div class = " num " > Three </div>
<div class = " num " > Four </div>
<div class = " num " > Five </div>
<div class = " num " > Six </div>
<div class = " num " > Seven </div>
<div class = " num " >Eight </div>
</div>
</body>
</html>
Let's see some of the shorthand properties:
- Grid-template-columns: Determining the size of the columns is utilized.
- Grid-template-rows: It is utilized to determine the line size.
- Grid-template-areas: Determining the grid layout by utilizing the named items is utilized.
- Grid-auto-rows: Indicating the automatic size of the rows is utilized.
- Grid-auto-columns: Indicating the automatic size of the columns is utilized.
- Grid-auto-flow: It is utilized to indicate how to put auto-set items and the automatic line size.
In the following example, we are including a portion of the above shorthand properties. Presently, we should see the example of utilizing a few properties:
Example
<!DOCTYPE html>
<html>
<head>
<style>
.main {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 100px 250px 200px;
background-color: black;
grid-gap: 10px;
padding: 20px;
}
.num {
background-color: lightgrey;
text-align: center;
padding: 20px 10px;
font-size: 30px;
}
</style>
</head>
<body>
<div class = " main " >
<div class = " num " > One </div>
<div class = " num " > Two </div>
<div class = " num " > Three </div>
<div class = " num " > Four </div>
<div class = " num " > Five </div>
<div class = " num " > Six </div>
<div class = " num " > Seven </div>
<div class = " num " >Eight </div>
</div>
</body>
</html>
The justify-content property
It is used to align the entire grid within the container. It includes values such as:
- Space-evenly: It gives an equivalent in the middle between or around the columns.
- Space-around: It gives equivalent space around the columns.
- Space-between: It gives an equivalent measure of space between the columns.
- Center: Adjusting the grid in the container is utilized.
- Start: Adjusting the grid toward the start of the container is utilized.
- End: Adjusting the grid toward the end of the container is utilized.
Note: It is noted that the absolute width of the grid ought not to be exactly the width of the container for any impact of the justify-content property.
Let's understand this property along with the values by using an example.
Example
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container1 {
display: grid;
justify-content: space-evenly;
grid-template-columns: 50px 50px 50px; /* Make the grid smaller than the container */
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container2 {
display: grid;
justify-content: space-around;
grid-template-columns: 50px 50px 50px; /* Make the grid smaller than the container */
grid-gap: 10px;
background-color: red;
padding: 10px;
}
.grid-container3 {
display: grid;
justify-content: space-between;
grid-template-columns: 50px 50px 50px; /* Make the grid smaller than the container */
grid-gap: 10px;
background-color: green;
padding: 10px;
}
.grid-container4 {
display: grid;
justify-content: end;
grid-template-columns: 50px 50px 50px; /* Make the grid smaller than the container */
grid-gap: 10px;
background-color: violet;
padding: 10px;
}
.grid-container5 {
display: grid;
justify-content: start;
grid-template-columns: 50px 50px 50px; /* Make the grid smaller than the container */
grid-gap: 10px;
background-color: gray;
padding: 10px;
}
.grid-container6 {
display: grid;
justify-content: center;
grid-template-columns: 50px 50px 50px; /* Make the grid smaller than the container */
grid-gap: 10px;
background-color: blue;
padding: 10px;
}
.num {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
</style>
</head>
<body>
<b> CONTAINER WITH SPACE-EVENLY VALUE </b>
<div class = " grid-container1 " >
<div class = ' num ' > 1 </div>
<div class = ' num ' > 2 </div>
<div class = ' num ' > 3 </div>
</div>
<b> CONTAINER WITH SPACE-AROUND VALUE </b>
<div class = " grid-container2 " >
<div class = ' num ' > 1 </div>
<div class = ' num ' > 2 </div>
<div class = ' num ' > 3 </div>
</div>
<b> CONTAINER WITH SPACE-BETWEEN VALUE </b>
<div class = " grid-container3 " >
<div class = ' num ' > 1 </div>
<div class = ' num ' > 2 </div>
<div class = ' num ' > 3 </div>
</div>
<b> CONTAINER WITH END VALUE </b>
<div class = " grid-container4 " >
<div class = ' num ' > 1 </div>
<div class = ' num ' > 2 </div>
<div class = ' num ' > 3 </div>
</div>
<b> CONTAINER WITH START VALUE </b>
<div class = " grid-container5 " >
<div class = ' num ' > 1 </div>
<div class = ' num ' > 2 </div>
<div class = ' num ' > 3 </div>
</div>
<b> CONTAINER WITH CENTER VALUE </b>
<div class = " grid-container6 " >
<div class = ' num ' > 1 </div>
<div class = ' num ' > 2 </div>
<div class = ' num ' > 3 </div>
</div>
</body>
</html>
The align-content property
It is used to align the entire grid within the container vertically. The align-content property in CSS Grid is utilized to align the grid container's content along the block axis (vertical axis). It works when there is additional room in the grid container subsequent to putting the grid items inside the grid tracks. Here is an example that exhibits the utilization of the align-content property:
Note: It is noted that the total height of the grid should be less than the height of the container for any effect of the align-content property.
The values of the align-content property are the same as the values of the justify-content property.
Example:
<!DOCTYPE html>
<html lang = "en">
<head>
<style>
.main {
display: grid;
grid: auto auto / auto auto auto auto;
grid-gap: 10px;
align-content: space-between; /* Align rows with space between them */
background-color: #f0f0f0;
padding: 20px;
}
.num {
background-color: #fff;
border: 1px solid #ddd;
text-align: center;
padding: 20px;
font-size: 18px;
}
</style>
</head>
<body>
<div class = " main " >
<div class = " num " > One </div>
<div class = " num " > Two </div>
<div class = " num " > Three </div>
<div class = " num " > Four </div>
<div class = " num " > Five </div>
<div class = " num " > Six </div>
<div class = " num " > Seven </div>
<div class = " num " > Eight </div>
</div>
</body>
</html>
Conclusion
CSS Grid is a flexible and amazing asset for planning layouts on the web. CSS Grid has revolutionized how web layouts are planned, offering a more intuitive and adaptable methodology. The capacity to characterize unequivocal grid structures, utilize grid regions, and use shorthand documentation gives clear punctuation to designers to lay out the skeletal system of their layouts. This establishment is then braced by cutting edge highlights like grid alignment, recreation, and hole control, which add to the visual artfulness of the plan.