How can I create a responsive CSS grid with fixed column widths?
Benjamin C

To create a responsive CSS grid with fixed column widths, you can combine the CSS Grid layout and media queries. This approach allows you to define a fixed column width while adapting the layout and number of columns based on the available screen width. Here's a step-by-step guide on how to achieve this: 1. HTML Structure:

1
2
3
4
5
6
7
  <div class="grid-container">
     <div class="grid-item">Item 1</div>
     <div class="grid-item">Item 2</div>
     <div class="grid-item">Item 3</div>
     ...
   </div>

In this example, we have a container div with the classgrid-container. Inside the container, we have multiple divs with the classgrid-item representing the individual items in the grid. 2. CSS Styling:

1
2
3
4
5
6
7
8
9
10
11
12
 .grid-container {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
     grid-gap: 10px;
   }

   .grid-item {
     background-color: #f0f0f0;
     padding: 10px;
     text-align: center;
   }

The.grid-container class sets the display togrid, which enables the CSS Grid layout. Thegrid-template-columns property defines the columns in the grid. In this example, we userepeat(auto-fit, minmax(200px, 1fr)), which creates columns with a minimum width of 200 pixels (minmax(200px, 1fr)) and automatically adjusts the number of columns to fit the available width (auto-fit). Thegrid-gap property sets the spacing between the grid items. The.grid-item class defines the styles for each grid item. You can customize the background color, padding, and text alignment according to your design requirements. 3. Media Queries:

1
2
3
4
5
6
7
8
9
10
11
12
 @media (max-width: 768px) {
     .grid-container {
       grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
     }
   }

   @media (max-width: 480px) {
     .grid-container {
       grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
     }
   }

Media queries allow you to define different column widths based on specific screen sizes. In this example, we use two media queries to adjust the grid layout for screens with a maximum width of 768 pixels and 480 pixels. You can customize the breakpoints and column widths based on your design requirements. Inside each media query, we override thegrid-template-columns property to define the desired column widths. By following these steps and customizing the CSS styles and media queries to fit your design requirements, you can create a responsive CSS grid with fixed column widths. The grid layout will adjust and adapt based on the available screen width, maintaining the fixed column widths defined in the CSS rules.

Similar Questions