How to use grid element using the grid auto placement rules?
In this article you will learn to use grid element using the grid auto placement rules. You can use auto as property value on grid as auto enable the container to customize it’s size on the basis of 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 on 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> |
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:
On above Example, grid’s 1st and 3rd row size is fixed and 2nd row size is auto. Therefore text overflowed from 3rd row due to fix size but it didn’t happen in a 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
Please Login to comment...