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

CSS Card Grid Display

Add Answer

ArtSyFluence Artistry answered on April 16, 2022 Popularity 9/10 Helpfulness 6/10

answer CSS Card Grid Display

related CSS Card Grid Display

related card with css grid

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 css display grid

Link to this answer
Share Copy Link

Contributed on Nov 06 2022

ArtSyFluence Artistry

0 Answers Avg Quality 2/10

Closely Related Answers

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

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

Link to this answer
Share Copy Link

Contributed on Apr 16 2022

CompSciGeek

0 Answers Avg Quality 2/10

CSS Card Grid Display

Contents

More Related Answers

CSS Card Grid Display

Closely Related Answers

CSS Card Grid Display

card with css grid

Grepper

Documentation

Social

Legal

Contact

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