Breaking News: Grepper is joining You.com. Read the official announcement!

card with css grid

CompSciGeek answered on April 16, 2022 Popularity 10/10 Helpfulness 3/10

answer card with css grid

related CSS Card Grid Display

card with css grid

Comment

Here is an example from https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_cards 
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.card {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  width: 40%;
}

.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

.container {
  padding: 2px 16px;
}
</style>
</head>
<body>

<h2>Card</h2>

<div class="card">
  <img src="img_avatar.png" alt="Avatar" style="width:100%">
  <div class="container">
    <h4><b>John Doe</b></h4> 
    <p>Architect & Engineer</p> 
  </div>
</div>

</body>
</html>

Popularity 10/10 Helpfulness 3/10 Language css

Source: Grepper

Tags: card css css-grid

Link to this answer
Share Copy Link

Contributed on Apr 16 2022

CompSciGeek

0 Answers Avg Quality 2/10

Closely Related Answers

CSS Card Grid Display

Comment

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
  grid-gap: 1em;
}

Popularity 9/10 Helpfulness 6/10 Language css

Source: web.dev

Tags: card

Link to this answer
Share Copy Link

Contributed on Nov 06 2022

ArtSyFluence Artistry

0 Answers Avg Quality 2/10

CSS Card Grid Display

Comment

.cards {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1em;
}
.cards .card {
  flex-basis: 15em;
  flex-grow: 1;
}

Popularity 9/10 Helpfulness 4/10 Language css

Source: web.dev

Tags: card css

Link to this answer
Share Copy Link

Contributed on Nov 06 2022

ArtSyFluence Artistry

0 Answers Avg Quality 2/10

card with css grid

Contents

More Related Answers

card with css grid

Closely Related Answers

CSS Card Grid Display

CSS Card Grid Display

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.