sakshi-jangra / hire-hint Goto Github PK

options are:

1. Basic responsiveness with the fraction unit
   CSS Grid brings with it a whole new value called a fraction unit. The fraction unit is written like fr, and it allows you to split the container into as many fractions as you want.
   Let’s change each of the columns to be one fraction unit wide.

.container {  
    display: grid;  
    grid-template-columns: 1fr 1fr 1fr;  
    grid-template-rows: 50px 50px;  
}

2. auto-fit
   Then there’s auto-fit. Let’s skip having a fixed amount of columns, and rather replace 3 with auto-fit.

.container {  
    display: grid;  
    grid-gap: 5px;  
    grid-template-columns: repeat(auto-fit, 100px);
    grid-template-rows: repeat(2, 100px);  
}