How to fix the size of cards in CSS - Html

Dude
February 14, 2023
294 views
0 votes
2 Answers

I want to make the size of cards to be same, irrespective of the text size. If i give more number of text, card is expanding. But i want to set fixed size for the card. Empty spaces for small number of text is what i am expecting. I have tried this code, but it is not looking as expected.

CSS:

@import url("https://fonts.googleapis.com/css?family=Poppins&display=swap");
* {
  margin: 0;
  padding: 0;
}

html {
  box-sizing: border-box;
  font-size: 62.5%;
}

body {
  background-color: #eee;
  font-family: "Poppins", sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 93vh;
}

.grid {
  display: grid;
  width: 104em;
  grid-gap: 6rem;
  grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
  align-items: start;
}

.grid-item {
  background-color: #fff;
  border-radius: 0.4rem;
  overflow: hidden;
  box-shadow: 0 3rem 6rem rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: 0.2s;
}

.grid-item:hover {
  transform: translateY(-0.5%);
  box-shadow: 0 4rem 8rem rgba(0, 0, 0, 0.5);
}

.card-img {
  display: block;

  object-fit: cover;
  width: 300px;
  height: 300px;
}

.card-content {
  padding: 2rem;
}

.card-header {
  font-size: 2rem;
  font-weight: 500;
  color: #0d0d0d;
  margin-bottom: 1.5rem;
}

.card-text {
  font-size: 1.5rem;
  letter-spacing: 0.1rem;
  line-height: 1.25;
  color: #3d3d3d;
  margin-bottom: 2rem;
}

.card-btn {
  display: block;
  width: 100%;
  padding: 1.5rem;
  font-size: 1.5rem;
  text-align: center;
  color: #3363ff;
  background-color: #d8e0fd;
  border: none;
  border-radius: 0.4rem;
  transition: 0.2s;
  cursor: pointer;
  letter-spacing: 0.1rem;
}

.card-btn span {
  margin-left: 1rem;
  transition: 0.2s;
}

.card-btn:hover,
.card-btn:active {
  background-color: #c2cffc;
}

.card-btn:hover span,
.card-btn:active span {
  margin-left: 1.5rem;
}

@media only screen and (max-width: 60em) {
  body {
    padding: 2rem;
  }

  .grid {
    grid-gap: 2rem;
  }
}

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>webIQ</title>

    <link rel="stylesheet" href="home.component.css" />
  </head>

  <body>
    <div class="grid">
      <div class="grid-item">
        <div class="card">
          <div class="card-content">
            <h1 class="card-header">Catalog</h1>
            <p class="card-text">
              Catalog helps us to manage our data assets with information such as location, structure, quality, and relationships, which makes it easier for data users to find and understand the data you need.
            </p> 
              <button type="button" class="card-btn" >Visit <span>&rarr;</span></button>
          </div>
        </div>
      </div>
      <div class="grid-item">
        <div class="card">
          <div class="card-content">
            <h1 class="card-header">Data Portal</h1>
            <p class="card-text">
              Data Portal is a section of our system where you can access details about databases, tables, location, schema, access history, and metadata. Additionally, you can manage access to the tables, including enabling, renewing, and revoking access.
            </p>
            <button class="card-btn">Visit <span>&rarr;</span></button>
          </div>
        </div>
      </div>
      <div class="grid-item">
        <div class="card">
          <div class="card-content">
            <h1 class="card-header">Canary Access</h1>
            <p class="card-text">
              Canary Access will give the details about the pending, granted requests details.
            </p>
            <button class="card-btn">Visit <span>&rarr;</span></button>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

Answers

- Coding_Harry
- February 14, 2023 at 10:30 am
- 0 votes
0
You can add max-height | max-width in each container/card and prevent the box from overflowing if it has more content inside.

Login or Signup to reply.

You can give each .grid-item, .card and .card-content a height: 100% value so that all the cards are of same height.

Now for the white-space, use flexbox with column direction for card-content and set margin-top value of card-btn to auto so that the button will always stay on the bottom.

Also, make sure to use box-sizing: border-box by default for all elements so that all elements are properly laid out.

Updated fiddle:

@import url("https://fonts.googleapis.com/css?family=Poppins&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  box-sizing: border-box;
  font-size: 62.5%;
}

body {
  background-color: #eee;
  font-family: "Poppins", sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 93vh;
}

.grid {
  display: grid;
  width: 104em;
  grid-gap: 6rem;
  grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
  align-items: start;
}

.grid-item {
  background-color: #fff;
  border-radius: 0.4rem;
  overflow: hidden;
  box-shadow: 0 3rem 6rem rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: 0.2s;
  height: 100%;
}

.grid-item:hover {
  transform: translateY(-0.5%);
  box-shadow: 0 4rem 8rem rgba(0, 0, 0, 0.5);
}

.card {
  height: 100%;
}

.card-img {
  display: block;
  object-fit: cover;
  width: 300px;
  height: 300px;
}

.card-content {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.card-header {
  font-size: 2rem;
  font-weight: 500;
  color: #0d0d0d;
  margin-bottom: 1.5rem;
}

.card-text {
  font-size: 1.5rem;
  letter-spacing: 0.1rem;
  line-height: 1.25;
  color: #3d3d3d;
  margin-bottom: 2rem;
}

.card-btn {
  display: block;
  width: 100%;
  padding: 1.5rem;
  font-size: 1.5rem;
  text-align: center;
  color: #3363ff;
  background-color: #d8e0fd;
  border: none;
  border-radius: 0.4rem;
  transition: 0.2s;
  cursor: pointer;
  letter-spacing: 0.1rem;
  margin-top: auto;
}

.card-btn span {
  margin-left: 1rem;
  transition: 0.2s;
}

.card-btn:hover,
.card-btn:active {
  background-color: #c2cffc;
}

.card-btn:hover span,
.card-btn:active span {
  margin-left: 1.5rem;
}

@media only screen and (max-width: 60em) {
  body {
    padding: 2rem;
  }
  .grid {
    grid-gap: 2rem;
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>webIQ</title>

  <link rel="stylesheet" href="home.component.css" />
</head>

<body>
  <div class="grid">
    <div class="grid-item">
      <div class="card">
        <div class="card-content">
          <h1 class="card-header">Catalog</h1>
          <p class="card-text">
            Catalog helps us to manage our data assets with information such as location, structure, quality, and relationships, which makes it easier for data users to find and understand the data you need.
          </p>
          <button type="button" class="card-btn">Visit <span>&rarr;</span></button>
        </div>
      </div>
    </div>
    <div class="grid-item">
      <div class="card">
        <div class="card-content">
          <h1 class="card-header">Data Portal</h1>
          <p class="card-text">
            Data Portal is a section of our system where you can access details about databases, tables, location, schema, access history, and metadata. Additionally, you can manage access to the tables, including enabling, renewing, and revoking access.
          </p>
          <button class="card-btn">Visit <span>&rarr;</span></button>
        </div>
      </div>
    </div>
    <div class="grid-item">
      <div class="card">
        <div class="card-content">
          <h1 class="card-header">Canary Access</h1>
          <p class="card-text">
            Canary Access will give the details about the pending, granted requests details.
          </p>
          <button class="card-btn">Visit <span>&rarr;</span></button>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

Please signup or login to give your own answer.

Click here to cancel reply.

How to fix the size of cards in CSS – Html

Answers