paano po gawing 3 columns sa laptop tapos 1 column sa phone? (CSS grid)
Ana Liza Mercado@ana_nightshift
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: 1fr 1fr; }
}
@media (max-width: 500px) {
.projects { grid-template-columns: 1fr; }
}may mas simple po ba? nakita ko yung auto-fit sa isang tutorial pero hindi ko talaga gets yung minmax 🥲 salamat po in advance
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.
Get the best of #css-is-my-passion weekly
One email each Monday with the most useful posts. No spam; unsubscribe in one click.
Comments
Sign in to join the conversation.
Sign in to commentAccepted answer
Kuya Migs@kuya_migs_codes
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.
Ana Liza Mercado@ana_nightshift
KUYA MIGS SUMAGOT 😭😭 NAG WORK PO!!! 3 columns sa laptop, 1 sa phone, wala nang media query. salamat po talaga, napanood ko po yung grid video niyo dati pero di ko gets yung minmax, ngayon gets ko na 🙏
Kuya Migs@kuya_migs_codes
Yan! Kaya mo yan Ana 💪 next challenge: palitan mo ng auto-fill tapos 2 cards lang ilagay mo, tingnan mo yung pagkakaiba 🔥
Jessica Tan@nomad_jess
ana!! sana all may kuya migs sa comments 😂 share mo yung portfolio dito pag tapos na, remote recruiters love a clean grid. charot, pero totoo
Jen Hayes@night_owl_jen
i don't speak tagalog but i understood the css and this auto-fit thing is magic?? stealing it for my recipe cards lol 🦉
Frieda Sommer@frieda_s
Nice solution from Miguel. One small accessibility addition: if each card links to a project, make the whole card one link instead of three separate links per card. Screen reader users will thank you.