#What is the best way to prevent CSS grid columns from collapsing width upon filtering out elements?

5 messages · Page 1 of 1 (latest)

slate gale
#

I want my inner CSS grid to maintain it's width even when elements are filtered out of it. I tried many solutions for a few hours but just gave up and got the effect by placing dummy elements in my component's rendering array. I want to see if there's a less hacky way to do that just for code maintainability.

Here's the .css for my body and grid

body {
  background-color: #f8fff7;
  color: #4c6f72;
  display: grid;
  font-family: 'Lato', sans-serif;
  justify-content: center;
  text-align: center;
}

.pokemon-grid {
  column-gap: 2rem;
  display: grid;
  grid-template-columns: 23% 23% 23%;
  justify-content: center;
  padding-bottom: 2rem;
  padding-top: 1rem;
  row-gap: 1.25rem;
  text-align: center;
}

Thank you!!

grid-collapse.png
rugged agateBOT
#
Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

simple acorn
#

just set a width on the grid

slate gale
#

changing the width to 85vw with a clamp fixed this. ty for the suggestion

rugged agateBOT
#
✅ Success!

This question has been marked as answered! If you have any other questions, feel free to create another post

Jump to answer

[Click here](#1201321529032581215 message)