-1

I have used 'cards' to contain my text. I had to set a min and max length to make the cards the same size. this worked for most of my site but I have a few pages with some cards which cant have a min and max height. I have removed the min and max legth so back to square one.

Could I have 2 seperate .card in css so can have one set with the min/max and another without?

or is there another solution

so that cards are the same size

tried setting min/max length and width

Alexia Lockhart
  • 1
  • 1
  • Why not just two classes? .card-min-max and .card for example. Or just multiple classes, one is .card but the other has the min/max width requirements. – Wimanicesir Aug 18 '23 at 07:30
  • Does this answer your question? [CSS-only masonry layout](https://stackoverflow.com/questions/44377343/css-only-masonry-layout) – MaxiGui Aug 18 '23 at 07:42

2 Answers2

0

yes you can create two seperate classes

.card-fixed {
  min-height: 200px; /* or whatever size you want */
  max-height: 200px;
  border: 2px solid pink;

}

.card-flexible {
  /* styles for the flexible card, without min/max height */
 }
<div class="card-fixed"></div>
<div class="card-flexible"></div>
MaxiGui
  • 6,190
  • 4
  • 16
  • 33
AKASH
  • 95
  • 3
  • Dont use `className` it does not work, you need only `class` here and add a color border or background to see the difference. – MaxiGui Aug 18 '23 at 07:44
0

You can try, using flexbox or even set up a grid, to get equal sized cards:

#flexbox {
  display: flex;
  gap: 1rem;
}

  #flexbox > div {
    max-width: 100px;
    max-height: 50px;
    background-color: teal;
    color: white;
    border-radius: 8px;
    padding: 1.5rem;
  }
  
    #flexbox > div.bigger {
      background-color: red;
      max-width: 100%;
      max-height: 100%;
    }

/* grid */
#grid {
  margin-top: 3rem;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, minmax(1px, 1fr));
}

  #grid > div {
    max-height: 50px;
    background-color: orange;
    color: white;
    border-radius: 8px;
    padding: 1.5rem;
  }
  
    #grid > div.bigger {
      background-color: red;
      max-width: 100%;
      max-height: 100%;
    }
<html>
  <head></head>
  <body>
    <div id="flexbox">
      <div>Some Text</div>
      <div>Some more Text</div>
      <div>Some Text. With even more Text.</div>
      <div class="bigger">This card doesn't care about any size restrictions!</div>
      <div>Some Text</div>
    </div>
    
    <div id="grid">
      <div>Some Text</div>
      <div>Some more Text</div>
      <div>Some Text. With even more Text.</div>
      <div class="bigger">This card doesn't care about any size restrictions!</div>
      <div>Some Text</div>
    </div>
  </body>
</html>
bergersilvio
  • 30
  • 5