paano po gawing 3 columns sa laptop tapos 1 column sa phone? (CSS grid)
sorry po if basic question 😭 kakatapos lang ng shift ko kaya medyo lutang pa. practice project ko po is portfolio page na may project cards. gusto ko 3 columns sa laptop, 2 sa tablet, 1 sa phone. ginawa ko po 3 media queries pero ang dami tapos may weird na gap sa tablet size: .projects { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; } @media (max-width: 900px) { .projects { grid-template-columns:…
Accepted answer
Walang basic question dito, Ana! 💪 Isang line lang kailangan mo, wala nang media query: .projects { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; } Ganito basahin: - minmax(260px, 1fr) = bawat column, minimum 260px, pero pwede lumaki hanggang equal share ng space (1fr) - auto-fit = ipasok mo yung pinakamaraming columns na kasya So sa laptop kasya ang 3 na tig-260px pataas, 3 columns. Sa tablet 2 lang kasya, 2 columns. Sa phone 1. Automatic lahat 🔥 Dalawang tips: 1. Kung ayaw mong lumampas sa 3 columns sa malalaking screen, lagyan mo ng max-width yung .projects (mga 900px) tapos margin: 0 auto. 2. Para sa sobrang liit na phone (mas maliit sa 260px yung screen), gamitin mo minmax(min(260px, 100%), 1fr) para hindi mag-overflow.