Question 232678 in CSS Question posted in
Some basic documentation can be found here.

can you create two seperate cards in css?

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

Tags:

2

Answers


  1. 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>
    Login or Signup to reply.
  2. 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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search