How to use grid element using the grid auto placement rules? Last Updated : 23 Jul, 2025 Comments Improve Suggest changes Like Article Like 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 57Mozilla Firefox 52Edge 16Safari 10Opera 44 Comment More infoAdvertise with us Next Article How to make input and select elements to be same width? A aksrathod07 Follow Improve Article Tags : Web Technologies CSS CSS-Basics CSS-Properties CSS-Questions +1 More Similar Reads CSS Examples CSS Examples showcase various styling techniques for HTML elements. They display properties, selectors, and functions that enhance design and creativity. This section offers categorized programming examples that cover properties, selectors, and functions. It provides multiple solutions for styling H 2 min read Basics QuestionsHow to apply inline CSS ?In this article we will learn how to apply inline CSS, Inline CSS contains the CSS property in the body section attached to the element is known as inline CSS. This kind of style is specified within an HTML tag using the style attribute. It is used to apply a unique style to a single HTML element. S 1 min read How to create a progress bar using HTML and CSS?The progress bar is an important element in the web, the progress bar can be used for downloading, marks obtained, skill measuring unit, etc. To create a progress bar we can use HTML and CSS. To make that progress bar responsive you will need JavaScript.In this article, we will learn to create progr 1 min read How to align item set to its default value in CSS ?In this article, we will learn how to align an item set to its default value in CSS. Approach: The align-items property is used to set the alignment of items inside the flexible container or in the given window. It takes value. The initial value is used to set this property value to the default valu 2 min read How to Skew Text on Hover using HTML and CSS?Skewed text animation effect can be created using HTML and CSS, this animation looks very cool and can be used in websites to make them look more dynamic, the following sections will guide on how to create the desired animation effect.First Section: In this section we will create a basic div tag whi 2 min read How to add space between elements in HTML?Spaces in HTML are essential for improving layout and readability. To add space between elements, such as rows in a table, you can use CSS properties like margin, padding, and border. Simple elements like <br> (line break) or <hr> (horizontal line) can also create space between sections. 4 min read How to define the painting area of the background in CSS?The task is to define the painting area of the background. The CSS background-clip property has a tendency to square measure victimization to outline the painting space of any net page's background. It specifies that up to that extent, we will modify the background of the webpage in terms of its con 3 min read How to create a 3D groove border using CSS?In CSS border-style property is used to set the line style of the border of an element. The border-style property may have one, two, three, or four values. When the specified value is one, the same style is applied to all four sides. When the specified value is two, the first style is applied to the 2 min read How to set different background properties in one declaration?We are going to use the Shorthand property in this article to set different background properties. To reduce the length of the CSS code we can declare background properties in one line through "Shorthand Property".Through this property we can define different properties of background in a single lin 2 min read How to Hide and show slide arrows in slick slider?In this post, we will create a slick slider and later on show you how to show/hide the buttons of the slick slider. For creating a slick slider just declare many elements with the same class name. Example: In this example, we will create a slick slider using Javascript. html <!DOCTYPE html> 3 min read How to put the caption below the table using CSS ?In this article we are going to learn How to put the caption below the table using CSS, To put the caption below the table we can use the CSS caption-side property. This property is used to specify the position where the table caption is placed. It is used in HTML Tables. This property can be used w 1 min read How to put the text inside of a created icon?The task is to put a text inside of a created icon. This post will go over some of the different ways in which you can put a text inside/over of a created icon/image(s). All of the discussed solutions follow a different presentation based on the same base idea i.e, to write/put the text over the ima 3 min read Design a Vertical and Horizontal menu using Pure CSSMenu is a very important component in any website. It is a user interface element within a webpage that contains links to other sections of the website. It can be displayed horizontally or vertically before the main content of the webpage or header. For Creating Vertical Menu: Menus are vertical by 2 min read How to create fullscreen search bar using HTML , CSS and JavaScript ?In this article, you will learn how to create a full-screen search Bar. Here You will be required to create two divs. One for the overlay container and the other for the overlay content container. HTML Code: The first step is to create an HTML file. Here we will create the basic structure for the se 2 min read How to Create Classes using CSS ?A class in CSS is a group of CSS property like font-style, height, width, color, etc. which is when used as an attribute in an HTML tag, the CSS styling is applied to that tag. Syntax:.class_name { CSS attributes;}A period character or symbol "." is used which is followed by the class name. Then ope 2 min read How to create a slideshow with HTML and CSS ?A slideshow can be used to display text or images that continuously scroll from one slide to the other to display its content. This article shows an approach to building a slideshow with the use of only HTML and CSS. It consumes less browser memory and takes less computation power as there is no Jav 3 min read Properties Based QuestionsHow to Change Link Color in CSS?The default HTML links are in blue color, and when the mouse hovers they get an underline. When the link is visited, it becomes violet. Now, To change the color of a link in CSS, you can use the color property along with the <a> (anchor) tag and its various pseudo-classes like :hover, :visited 2 min read How to specify the double border using CSS ?The task is to specify the double border using CSS. In this article, we are going to use the border-style property to style the border. we have two common methods border-style property style and outline property in CSS. Property used: border-style property: This property is used to set the style of 2 min read How to change the underline color in CSS?In this article, we are going to learn how to change the underline color in CSS, To change the underline color in CSS, use the text-decoration-color property. Set it to the desired color value. Styling is implemented in HTML text to make it catchy and attractive. The text can be made italic, underli 1 min read How to set padding around an element using CSS ?In this article, we will learn How to set the padding around an element using CSS. Approach: The padding is the space between the content of the element and its boundaries. We can set the padding around an element using the padding property of the CSS. It takes four values top_padding, right_padding 1 min read How to align item set to its default value in CSS ?In this article, we will learn how to align an item set to its default value in CSS. Approach: The align-items property is used to set the alignment of items inside the flexible container or in the given window. It takes value. The initial value is used to set this property value to the default valu 2 min read How to dynamically change color by percentage CSS ?In this article, we will learn How to dynamically change color by percentage CSS. Approach: We can dynamically change the color of any element by percentage using the filter property in CSS. The brightness() function of the filter property is used to dynamically change color by percentage. The brigh 1 min read How to use the position property in CSS to align elements ?In this article, we will learn how to use the position property in CSS to align elements. We can align elements using position property using CSS with some helper property of it. Approach: The position property is used to set the position of the element. We can align elements using position property 2 min read How to use font-feature-settings property in CSS ?In this article, we learn how to use the font-feature-settings property in CSS, If you want to control the advanced typographic features in open-type fonts then the font-feature-settings property is very useful for developers. One of the properties added to CSS3 is the font-feature-settings property 2 min read How to set the perspective from where an element is viewed in CSS ?In this article we will see, how the CSS perspective works. The CSS perspective is a new CSS property that has to provide to manage the distance between the z-axis. We all know that we work with a 2D surface. So if we rotate our objects, then this completeness is not displayed. The solution to this 2 min read How to set default value to align content in CSS ?In this article, we will learn how to set the default value to align content to its default value in CSS. The align-content property is used to align content within a specified container. Approach: The normal value of the align-content property is used to set the default value in CSS. It sets its de 2 min read How to set the overflow property to scroll in CSS ?In this article, we will see how to set the overflow property to scroll in CSS. The overflow property is used to control the big content. It tells what to do when an element's content is too big to fit in the specified area. When the overflow property is set to scroll, the overflow is clipped, but a 2 min read How to set the order of flexible items using CSS ?The purpose of the article is to set the order of the flexible items using CSS. You can achieve this task by using the CSS order property. CSS order Property: This property is used to specify the order of flexible items relative to the rest of the flexible items inside the same container and keep in 2 min read How to set visibility property of an element in CSS ?Visible property is used to specify whether an element is visible or not in a web document, but the hidden elements take up space in the web document. You can set the visibility property of an element in CSS using the same Visible property. Through visibility property, we can make elements like imag 2 min read How to Set the Inset Shadow Using CSS ?In CSS, setting an inset shadow involves creating an inner shadow effect within an element's boundaries. Unlike traditional shadows that appear outside the element, an inset shadow gives a recessed or sunken look, enhancing the element's visual depth and appearance.Note: By default, the shadow gener 2 min read How to use grid element using the grid auto placement rules?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-templat 2 min read How to make input and select elements to be same width?As a beginner, while working with CSS and HTML, you may have noticed a problem with the form elements like input and select that when the output is opened in the browser, both elements are not having the same width. It would not look properly aligned to the user. In this article, we would be learnin 2 min read How to set a rotated element's base placement in CSS ?In this article, we will learn how to set a rotated element's base placement in CSS. This can be used to rotate an element from a certain point to its origin. Here we use the transform-origin property. The CSS transform-origin property defines the origin point around which an element is transformed 2 min read How to set different type of cursors using CSS ?In this article, we will learn how to set different types of cursors using CSS. The cursor CSS is used to specify the kind of mouse cursor when the mouse pointer is over an element. By using it, we may choose the type of cursor that the user will see. here we use the cursor property. The cursor prop 2 min read Selectors QuestionsSidebar Menu Using HTML and CSSIn this sidebar menu in HTML and CSS article, we’ll cover how to create a sidebar menu using HTML and CSS. Whether you’re a beginner or an experienced web developer, this guide will provide you with the knowledge and skills to build a Responsive sidebar menu in HTML and CSS that improves usability a 2 min read How to Select Text Input Fields using CSS Selector ?Selecting text input fields using CSS selectors means targeting <input> elements of type text in a form. This allows you to apply specific styles (e.g., font, color, borders) to those fields. This is typically done using the [type="text"] CSS attribute selector.Here we have some CSS selector t 4 min read How to change the color of selected text using CSS ?The colour of selected text can be easily changed by using the CSS | ::selection Selector. In the below code, we have used CSS ::selection on <h1> and <p> element and set its colour as yellow with green background. Below example implements the above approach: Example: html <!DOCTYPE h 1 min read How to Set the Content as a Counter in HTML?The task is to set content as a counter. The CSS counters area unit “variables†maintained by CSS whose values are also incremented by CSS rules (to track what variety of times they are used). Counters permit you to manage the appearance of content supported by its placement in the document.Way to s 3 min read How to create Hover animations on Button ?In this project, we are going to create animated buttons using HTML and CSS. In these buttons when we hover over them an emoji get displayed on them for better UX. A glimpse of the Buttons: CDN Link: For button icons, we will use the fontawesome CDN link. Place this link in the script tag. https://k 6 min read How to create a shinny button using HTML and CSS ?Buttons are undoubtedly one of the most important components of any website or app. A button should be designed in such a way that it stands out of the other component so that it is becoming clear to the user where to click and what is the button used for. There are infinite ways in which a button c 3 min read How to create reflection effect using HTML and CSS ?The reflection effect is one of the coolest effects that one can use in his/her website. It is a type of informal effect so it is highly recommended not to use it any professional project. You can use it in your personal projects and maybe your portfolio to show your creativity. In this effect, we t 3 min read How to create Image Folding Effect using HTML and CSS?In this article, we are going to create an image folding effect below the main image. This is a simple project, we can achieve our target only by using HTML and CSS. Approach: Create the main div in which we are creating 4 list tags.Use of nth-child() selector property to give different styles to di 2 min read How to create Perspective Text using HTML & CSS ?In this article, we are going to create an illusion of images below the main image. This is a simple article, we can achieve our target only by using HTML & CSS. Approach: Create a main div in which we have added a heading tag and then use the selectors in CSS to create the effects. HTML Code: F 2 min read How to create a zebra stripped table with CSS ?Creating a zebra-striped table with CSS makes your table easier to read by adding alternating background colors to the rows. This design helps to visually separate the rows, making it simpler for users to follow the data.These are the following methods to create a zebra-stripped table with CSS Table 2 min read How to create Responsive Profile Card using HTML and CSS ?In this article, we are going to create a profile card from where a user can check out the basic details of other users and connect with them through different handles as well as message the user. Approach:Set up HTML with a container div containing an image and content sections.Style the container, 5 min read How to Create Shock Wave or Explosion Effect using HTML and CSS?The shock wave effect is also known as the explosion effect. It is one of the simple CSS effects. For a beginner, it is one of the best examples to learn the concept of pseudo-elements. The pseudo-element that we are using is hover. First, try to create from own before jumping into the code to under 3 min read How to Make Horizontal Line with Words in the Middle using CSS?CSS provides a simple and elegant way to create horizontal lines with text or images in the middle, which can be a great way to enhance the visual appeal of a webpage. This can be achieved using CSS properties like flexbox, ::before, and ::after pseudo-elements. Syntax:h4:before, h4:after { content: 2 min read How to select elements by data attribute using CSS?CSS provides a way to select HTML elements based on attributes and their values. This can be extremely helpful for targeting elements in a flexible and specific way. This enables fine-tuned control over styling elements in a webpage.Here are the different ways to select elements using attribute sele 2 min read How to define the name of the keyframe that binds to the selector in CSS?There has been a rise in animated websites these days. Writing and running animations on a web page requires the use of keyframes to set some kind of rules for the frame in which that animation is being performed. While writing the required properties in the keyframes, we basically assign a value th 2 min read How to Select All Children of an Element Except Last Child using CSS?When designing and developing web applications, there are scenarios where you may want to apply styles to all child elements of a parent except the last one. For instance, you might want to add a border between items in a navigation menu but not include a border after the last item. This can be achi 2 min read How to choose background color through color picker?In this project, we are going to change the background color with the help of the Color Picker.Glimpse of the Project:Approach:Create an HTML file in which we are going to add the text and a color picker which helps to change the background color of our web-page.Create a CSS style to give some anima 3 min read How to create Image Stack Illusion using HTML and CSS ?In this article, we are going to create an illusion of images below the main image. It is the same as the image set of the gallery in an older version of Android. This is a simple project, we can achieve our target only by using HTML AND CSS.Overview of the project:Approach:Create a main div in whic 3 min read Functions QuestionsHow to add Box-Shadow to The Clip-Path Object ?As we all know that we can apply the shadow using the Box-Shadow attribute of CSS, but it is not valid if we apply it on the clipped Object using Clip-Path() function of CSS. Approach: We are going to create two divs, one for the main and the other for our clipped shape.Then we are going to use the 2 min read How to create Animated Blur Navbar using CSS?The Navbar is the main component of any website through which the user can navigate through all the components and sections of a site. That's why it is really important to have a well-designed navigation bar or menu. So today we will be looking at a navbar in which all the elements get blur except t 2 min read Miscellaneous QuestionsHow to Draw an Ellipse using CSS?We can take a div element and set its width and height property to make a rectangle. Then apply border-radius property on rectangular div element to convert rectangle to ellipse. By setting the border-radius to 50% and adjusting the width and height of the element, an elliptical shape can be created 1 min read How to design initial letter of text paragraph using CSS ?Sometimes a webpage contains good contents for reading but the styling of the texts looks simple and straight, so it becomes boring for the readers to read it, and they leave the webpage. But when they read story books, they read them fully because of the good visuals in that book, so they complete 2 min read How to create Neumorphism Effect using HTML and CSS ?Neumorphism (neomorphism) is a modern way of styling web-elements of any web-page and providing a 3D effect. This animation effect can be easily generated by using HTML and CSS. Box-shadow property of CSS can be used to implemented Neumorphism. It is used to add a dark shadow to one side and a light 2 min read Design a Parallax Webpage using HTML and CSSA parallax website includes fixed images in the background that are kept in place and the user can scroll down the page to see different parts of the image. In this article, we are creating a parallax webpage using HTML and CSS. We will use basic tags of HTML like div, paragraph, and heading to writ 4 min read How to use SVG with :before or :after pseudo element ?Using SVG with :before or :after pseudo-elements in CSS allows for the dynamic insertion of vector graphics into HTML elements. This technique enhances design flexibility by leveraging SVG's scalability and interactivity while maintaining a clean HTML structure and reducing HTTP requests for image a 3 min read How to Create Border Animation using CSS?Creating a border animation using CSS involves utilizing hover effects to dynamically alter the appearance of an element's borders when interacted with. This technique leverages CSS pseudo-elements, combined with hover selectors, to achieve animated border transformations based on user interaction. 2 min read How to Create Liquid Filling Effect on Text using HTML and CSS ?The liquid fill text animation can be done using CSS | ::before selector. We will use key frames to set height for each frame of animation. Please make sure you know about both CSS | ::before selector and CSS | @keyframes Rule before try this code.The basic styling of the text can be done differentl 3 min read How to create RGB color generator using HTML CSS and JavaScript ?In this article, we will create a RGB color generator using HTML, CSS, and JavaScript. Using RGB color generator, we can construct all the colors from the combination of Red, Green, Blue colors. Each color is represented by the range of decimal numbers from 0 to 255 (256 levels for each color). So, 3 min read How to create dark mode using prefer-color-scheme media query ?In this article, we are creating a dark mode interface using the prefer-color-scheme media query. The prefer-color-scheme is a new media query that is used to detect the current theme of your system and provide a feature that helps in creating your web page theme according to your system preference. 3 min read Design a Calendar using HTML and CSSIn this article, we will create a calendar using HTML and CSS. HTML is used to build the basic structure of a web page, while CSS adds design and layout styles to make it visually appealing. Nearly 90% of websites rely on the combination of HTML and CSS for creating structured and styled content. Th 5 min read Fading Text Animation Effect Using CSS3The fading text animation effect is one of the most demanding effects on UI/UX designing. This effect can be achieved by using HTML5 and CSS3. In the fading text effect, whenever we load the window, the text will slowly start disappearing. We can implement this effect using the animation property in 2 min read How to create an image slider works with radio button?A slider is a series of images that appear in sequence. Now, we will see an image slider working with radio buttons using HTML & CSS in which the image slides up, on clicking the radio button.ApproachThe HTML defines a container for an image slider with five radio buttons to control the slides. 3 min read How to use Google material icon as list-style in a webpage using HTML and CSS ?Icons can be added to our HTML page from the icon library. All the icons in the library can be formatted using CSS. They can be customized according to size, colour, shadow, etc. They play a considerate part in materialize CSS. Materialize CSS provides a rich set of material icons of google which ca 2 min read Create an About us Page using HTML and CSSAn About Us page is a crucial part of any website. It introduces your organization, builds trust with visitors, and often serves as one of the most visited pages. Whether you're building a portfolio, company site, or educational platform, having a structured and visually appealing About page improve 5 min read Design Background color changer using HTML CSS and JavaScriptBackground color changer is a project which enables to change the background color of web pages with ease. There are color boxes on a web page when the user clicks on any one of them, then the resultant color will appear in the background of the web page. It makes web pages look attractive.File stru 3 min read How to Create a div that Contains Multiple Fixed-Size Images?Creating a div that contains multiple fixed-size images involves defining a container (div) in HTML and applying CSS to set consistent dimensions for the images. This ensures that all images within the container maintain the same width and height, providing a uniform layout.ApproachHTML Structure: F 2 min read Like