CSS Is My Passion
Nobody has said anything yet. Be the first.
CSS Is My Passion
CSS layout help: Grid, Flexbox, responsive design and styling
Centering things. Grid that will not behave. The z-index war. Beautiful layouts and the three hours it took to nudge one pixel.
15 members
5 posts
Created Aug 2026
Community rules
A reproduction beats a paragraph
CodePen, StackBlitz, anything runnable.
Bring the detail
Versions, error text, what you already tried. "It does not work" is not a question anyone can answer.
No drive-by self promotion
Share your own work when it answers the thread. A link with no context is a advert, and it gets removed.
Top contributors
Discussions
- Primary
Showing 5 posts.
Posts in t/css-is-my-passion
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.
auto-fill vs auto-fit in css grid, i still dont get it
i have this card grid and i read like 4 articles and still cant tell what the difference is .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; } auto-fill and auto-fit look EXACTLY the same on my screen. when does it actually change something? feels like im missing something obvious
Tab key skips all my buttons in Safari but works in Chrome, is it a focus-visible problem?
I have a doubt that is making me crazy. In our checkout, when I navigate with the keyboard in Chrome and Firefox everything works: Tab goes to inputs, buttons and links, and the focus ring appears. In Safari on Mac, Tab jumps only between the text inputs. The buttons and links are completely skipped, like they don't exist. I thought it was my CSS, we have this: button:focus { outline: none; } button:focus-visible {…
my card looks fine on the page but gets squished in the sidebar?? do i need container queries
hi all 🦉 1am here, kids are asleep, coffee #3. building a recipe site for practice and i have a recipe card, image on the left and text on the right. on small screens it stacks. i did it with a media query like teh tutorial said: .card { display: flex; flex-direction: column; gap: 1rem; } @media (min-width: 600px) { .card { flex-direction: row; } } on the main page it looks great. but i also show the same card in…
Accepted answer
Yes, this is exactly what container queries are for. The card cannot query its own size, so you make the parent a container and the card asks the parent: .card-wrap { container-type: inline-size; } .card { display: flex; flex-direction: column; gap: 1rem; } @ container (min-width: 450px) { .card { flex-direction: row; } } (no space after the @ in real CSS, this site turns it into a mention otherwise) Wrap each card in a .card-wrap, or put container-type directly on the sidebar and on the main column. Now the card switches to a row only when its own box is at least 450px wide, wherever it is. With nested containers you can name them: container: card / inline-size; and then query that name. And :has() is real, you did not dream it. .card:has(img) { ... } styles only the cards that contain an image. Works in all current browsers since the end of 2023. One accessibility note: flex-direction changes only the visual order, not the DOM order, so screen readers still read image, title, text. Good habit to check that whenever you rearrange things with CSS.