Responsive Design in CSS

 Responsive Design in CSS

Responsive design is a design approach that allows web pages to adapt to different screen sizes and devices. To create a responsive design, you need to use a combination of CSS media queries, flexible layouts (such as CSS grid or flexbox), and relative units (such as percentages or ems). Here's an example of how to create a responsive layout using CSS grid and media queries:

css

.container {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

  gap: 20px;

}

@media (max-width: 768px) {

  .container {

    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));

  }

}

This will create a grid layout with a minimum column width of 200 pixels that automatically adjusts to fit the available space, with a 20-pixel gap between each grid item.