SOME CSS TRICKS FOR RESPONSIVENESS (MINIMIZE USE OF MEDIA QUERY)

SOME CSS TRICKS FOR RESPONSIVENESS (MINIMIZE USE OF MEDIA QUERY)

1. grid-container (.grid-container):
   display: grid; Enabling grid layout.

• grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); This creates as many columns as possible to fit in the container, with each column having a minimum width of 250px and a maximum width of 1 fraction of the available space.
  grid-auto-rows: Set to a minimum height of 100px for each row.
  gap: A spacing of 30px between grid items.

1. Body Styles:
   font-size: clamp(16px, 2vw + 1rem, 24px); which adjusts the font size responsively between a minimum of 16px and a maximum of 24px, scaling with the viewport width.

2. Container Width:
   width: clamp(400px, 50vw, 800px);
   min-width: set to 400px
   Width: Set to 50% of the parent element.
   max-width: set to 800px to prevent it from becoming too wide on larger screens.

This CSS is designed to create a flexible and responsive layout