Open In App

How to use grid element using the grid auto placement rules?

Improve
Improve
Like Article
Like
Save
Share
Report

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


Last Updated : 31 May, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads