How to Create a Responsive CSS Grid Layout ? Last Updated : 15 Nov, 2024 Comments Improve Suggest changes Like Article Like Report Here are different ways to create a responsive grid layout with CSS.1. Using auto-fill PropertyThis method can be used CSS Grid for a responsive layout. The grid-template-columns property adjusts columns based on space, keeping a minimum width of 200 pixels. Gaps between items are set with grid-gap. This approach ensures a flexible design that adapts to different screen sizes, ideal for responsive web development. HTML <!DOCTYPE html> <html> <head> <style> .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); grid-gap: 10px } .grid > div { font-size: 20px; padding: 1rem; color: yellow; text-align: center; background: red; } </style> </head> <body> <div class="grid"> <div> Div 1</div> <div>Div 2</div> <div>Div 3</div> <div>Div 4</div> <div>Div 5</div> <div>Div 6</div> <div>Div 7</div> <div>Div 8</div> </div> </body> </html> OutputOutput gif2. Using auto-fill and auto-fit PropertiesThis approach provides flexibility in creating responsive grid layouts, allowing developers to choose between filling the space with fixed-width columns (auto-fill) or adjusting column widths to fit the container (auto-fit). The .auto-fill and .auto-fit classes are used to control the behavior of the grid columns. The .auto-fill class creates as many columns as possible with a minimum width of 200 pixels, while .auto-fit ensures that the columns fit snugly within the container, expanding or contracting as needed. HTML <!DOCTYPE html> <html> <head> <style> .grid { display: grid; margin: 8px; grid-gap: 10px } .grid > div { font-size: 20px; padding: 1rem; color: yellow; text-align: center; background: red; } .auto-fit { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } .auto-fill { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } </style> </head> <body> <div class="grid auto-fill"> <div>Div 1</div> <div>Div 2</div> </div> <div class="grid auto-fit"> <div>Div 1</div> <div>Div 2</div> </div> </body> </html> OutputOutput gif3. Using Media QueryThis method uses media queries to create a responsive webpage layout. The .wrapper class defines the grid container with areas for the header, sidebar, content, and footer. Layout changes based on screen width, ensuring a flexible design that adapts to different sizes while maintaining structure and styling for each area. HTML <!DOCTYPE html> <html> <head> <style> body { margin: 40px; } .sidebar { grid-area: sidebar; } .content { grid-area: content; } .header { grid-area: header; } .footer { grid-area: footer; } .wrapper { background-color: #eeeeee; color: #444; padding: 10px; margin: auto; display: grid; grid-gap: 1em; grid-template-areas: "header" "sidebar" "content" "footer"; } @media only screen and (min-width: 500px) { .wrapper { grid-template-columns: 20% auto; grid-template-areas: "header header" "sidebar content" "footer footer"; } } @media only screen and (min-width: 600px) { .wrapper { grid-gap: 20px; grid-template-columns: 120px auto; grid-template-areas: "header header" "sidebar content" "footer footer"; max-width: 600px; } } .box { background-color: #444; color: #ffffff; border-radius: 5px; padding: 10px; font-size: 20px; } .header, .footer { background-color: blue; } .sidebar { background-color: #ccc; color: #444; } .content { background: rgb(16, 160, 179); } </style> </head> <body> <div class="wrapper"> <div class="box header">Header</div> <div class="box sidebar">Sidebar</div> <div class="box content"> Content </div> <div class="box footer">Footer</div> </div> </body> </html> OutputOutput gif Comment More infoAdvertise with us Next Article How to Create a Responsive CSS Grid Layout ? T tushardogra19 Follow Improve Article Tags : Web Technologies CSS CSS-Questions Similar Reads How to Create a Responsive Image Grid using CSS? A responsive image grid is a layout technique used to display images in a grid-like structure that adjusts dynamically based on the screen size to ensure that the grid looks good and functions well across various devices and screen resolutions. Below are the approaches to creat a responsive image gr 3 min read How to Create a Responsive Image Gallery using CSS? Creating a responsive image gallery using CSS is a common task in web development. A responsive gallery adjusts to different screen sizes and ensures that images look good on devices ranging from mobile phones to desktop monitors. In this article, we will explore different approaches to creating a r 3 min read How to Create a 4-Column Layout Grid with CSS? We can create a layout with multiple columns using CSS. It is easier to design complex layouts. In this article, we are going to discuss how to create a 4-column layout grid using CSS. We will discuss different approaches, their syntax, and code examples of each method. A 4-column layout grid is a c 3 min read How to Create a 3-Column Layout Grid with CSS? Grid in CSS is a powerful layout system that allows you to create complex, responsive designs with ease. By defining rows and columns, you can position elements precisely within a grid container. Using grid properties like grid-template-columns, you can create flexible and adaptive layouts, such as 3 min read How to Create a 2-Column Layout Grid with CSS? Creating a two-column layout is a common design pattern used in web development. This layout helps to organize content efficiently and is used across various types of websites. A 2-column layout divides the webpage into two sections, which can be useful for creating sidebars, main content areas, or 4 min read How to Create Dynamic Grid Layout using CSS? A dynamic grid layout using CSS can help us to build responsive and flexible web designs. In this article, we are going to learn about different approaches to achieving dynamic grid layouts, with their syntax, and example code for each method. A dynamic grid layout adjusts based on the content and s 3 min read How to Create Responsive Divs in Bootstrap ? To create responsive divs in Bootstrap, utilize the grid system with container and row classes. Define columns using col classes and specify breakpoints for different screen sizes. This ensures divs adjust their layout and size responsively across devices. Below are the approaches to creating respon 2 min read How to Create Responsive Column Cards with CSS ? Creating a responsive card layout is very beneficial in development. These cards are a great way to display content in a neat and organized manner. You can create responsive cards using the below approaches.Table of ContentUsing FlexboxUsing CSS GridUsing FlexboxThe display: flex property establishe 3 min read How to make a HTML div responsive using CSS ? The CSS Media Query can be used to make an HTML "div" responsive. The media queries allow the users to change or customize the web pages for many devices like desktops, mobile phones, tablets, etc without changing the markups. Using the media query, the user can change the style of a particular elem 2 min read Pure CSS Responsive Grids Pure CSS is a free and open-source framework of CSS. CSS Grid Layout is a method designed for the two-dimensional layout of items with rows and columns. It consists of both unresponsive and responsive modules. Responsive design's function is to display the contents of the website automatically acros 4 min read Like