How to use grid element using the grid auto placement rules?
Last Updated :
31 May, 2023
In this article, you will learn to use grid elements using the grid auto-placement rules. You can use auto as a property value on the grid to auto-enable the container to customize its size on the basis of the content of the items in the row or columns.
Syntax:
grid-template-rows : auto
grid-template-columns: auto
Property Value:
- auto : The size of the rows or columns is determined by the size of the container, and the size of the content of the items in the row or columns.
Example 1: Using auto for both Row and Column.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
CSS | grid Property
</title>
<style>
h1 {
color: green;
}
.main {
display: grid;
grid-template-columns: auto;
grid-template-rows: auto;
grid-gap: 5px;
background-color: green;
padding: 5px;
}
.gfg {
background-color: lightgrey;
text-align: center;
padding: 20px 0;
font-size: 30px;
}
</style>
</head>
<body>
<center>
<h1>Welcome to GFG </h1>
<h3>This tutorial is on CSS grid property</h3>
<div class="main">
<div class="gfg">Welcome to GeeksforGeeks</div>
<div class="gfg">Complete Portal for Geeky</div>
<div class="gfg">Courses</div>
<div class="gfg">Data Structure and Algorithm</div>
<div class="gfg">Competitive Programming</div>
<div class="gfg">Operating System</div>
<div class="gfg">DBMS</div>
</div>
</center>
</body>
</html>
|
Output:
Example 2:
HTML
<!DOCTYPE html>
<html>
<head>
<title>
CSS | grid Property
</title>
<style>
h1 {
color: green;
}
.main {
display: grid;
grid-template-columns: 400px 400px;
grid-template-rows: 60px auto 60px;
grid-gap: 5px;
background-color: green;
padding: 5px;
}
.gfg {
background-color: lightgrey;
text-align: center;
padding: 20px 0;
font-size: 30px;
}
</style>
</head>
<body>
<center>
<h1>Welcome to GeekdforGeeks</h1>
<h3>This tutorial is on CSS grid property</h3>
<div class="main">
<div class="gfg">Complete Portal for Geeky </div>
<div class="gfg">Courses</div>
<div class="gfg">Data Structure and Algorithm</div>
<div class="gfg">
Competitive Programming,
If you are looking to conquer your coding skills,
we are here with our Competitive Programming Live Course.
</div>
<div class="gfg">Operating System</div>
<div class="gfg">
DBMS, Database management system (DBMS) is a
collection of interrelated data and a set of
programs to access those data
</div>
</div>
</center>
</body>
</html>
|
Output:
In the above example, the grid’s 1st and 3rd-row size is fixed and the 2nd-row size is auto. Therefore text overflowed from the 3rd row due to fixed size but it didn’t happen in the 2nd row due to auto property value.
Supported Browsers: The browser supported by CSS | grid auto Property are listed below:
- Google Chrome 57
- Mozilla Firefox 52
- Edge 16
- Safari 10
- Opera 44
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...