Css Cards With Grid Layout

Here’s a guide on creating CSS Cards With Grid Layout, allowing for flexible and responsive designs. This tutorial will walk you through the process of building a dynamic card layout using CSS Grid and subgrids, perfect for showcasing content in a visually appealing and organized manner.

Setting up the HTML Structure

To begin, we need to create the foundation of our card layout with HTML. This involves defining the container for the cards and the structure for each individual card. Ensure that each card has an image, title, and an actions section.

<h1>Subgrid and card layouts</h1>
<div class="cards">
  <div class="card"><img src="https://picsum.photos/200/300" alt="random image from picusm"/>
    <h3>Title 1</h3>
    <div class="actions">
      <button>Buy</button>
      <div class="prce">$25</div>
    </div>
  </div>
  <div class="card"><img src="https://picsum.photos/200/400" alt="random image from picusm"/>
    <h3>Title 2</h3>
    <div class="actions">
      <button>Buy</button>
      <div class="prce">$50</div>
    </div>
  </div>
  <div class="card"><img src="https://picsum.photos/300/400" alt="random image from picusm"/>
    <h3>Long Title 3: forcing a multi line</h3>
    <div class="actions">
      <button>Buy</button>
      <div class="prce">$15</div>
    </div>
  </div>
  <div class="card"><img src="https://picsum.photos/200/500" alt="random image from picusm"/>
    <h3>Title 4</h3>
    <div class="actions">
      <button>Buy</button>
      <div class="prce">$46</div>
    </div>
  </div>
  <div class="card"><img src="https://picsum.photos/200/200" alt="random image from picusm"/>
    <h3>Title 5</h3>
    <div class="actions">
      <button>Buy</button>
      <div class="prce">$50</div>
    </div>
  </div>
  <div class="card"><img src="https://picsum.photos/300/200" alt="random image from picusm"/>
    <h3>Title 6</h3>
    <div class="actions">
      <button>Buy</button>
      <div class="prce">$45</div>
    </div>
  </div>
  <div class="card"><img src="https://picsum.photos/400/400" alt="random image from picusm"/>
    <h3>Title 7</h3>
    <div class="actions">
      <button>Buy</button>
      <div class="prce">$60</div>
    </div>
  </div>
  <div class="card"><img src="https://picsum.photos/200/400" alt="random image from picusm"/>
    <h3>Title 8</h3>
    <div class="actions">
      <button>Buy</button>
      <div class="prce">$75</div>
    </div>
  </div>
  <div class="card"><img src="https://picsum.photos/200/500" alt="random image from picusm"/>
    <h3>Title 9</h3>
    <div class="actions">
      <button>Buy</button>
      <div class="prce">$100</div>
    </div>
  </div>
  <div class="card big">
    <h3>Notes</h3>
    <div class="notes">This is a simple demo of using subgrids for cards, this highlights how we can overcome the issues of having objects of multiple sizes, and aligning them, along with the adjoining cards. In this case the images are of different widths and heights, and to also throw in 1 card header that overflows a single line.
      <p> <code>Subgrid </code>is making this rather simpler to implement.</p>
    </div>
  </div>
</div>

Applying CSS Grid for Layout

The next step is to use CSS Grid to create the overall structure for the cards. This allows us to easily arrange the cards in a responsive grid layout. We will use `grid-template-columns` and `grid-auto-rows` to define the grid.

@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100;400;700&display=swap");
:root {
  font-family: "Roboto", sans-serif;
}

body {
  background-color: #EBEBE3;
  margin: 0;
  font-size: 1.2rem;
}

code {
  color: #7ea5b9;
}

h1 {
  font-weight: 100;
  text-align: center;
}

.cards {
  display: grid;
  grid-auto-flow: dense;
  grid-auto-rows: 200px auto auto;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20ch), 1fr));
  gap: 1em;
  width: min(100ch, calc(100% - 2rem));
  margin: 0 auto;
}

.card {
  background-color: #F9F6EF;
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  border: 1px solid #0002;
  box-shadow: 0.1em 0.1em 0.5em #0003;
  border-radius: 0.5em;
  overflow: hidden;
}
.card img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: 50% 80%;
}
.card h3, .card .actions {
  padding-inline: 0.5em;
  margin: 0;
}
.card .actions {
  display: flex;
  justify-content: space-between;
  padding-bottom: 1em;
  color: #1784ba;
}
.card .actions button {
  all: unset;
  animation: 0.3s ease;
  padding: 0.1em 0.5em;
  border: 1px solid transparent;
  border-radius: 0.3em;
  cursor: pointer;
}
.card .actions button:hover {
  border: 1px solid currentcolor;
}
.card .actions button:active {
  background-color: #1784ba;
  color: #F9F3EE;
  border: 1px solid #000;
}
.card .actions > * {
  padding: 0.1em 0.5em;
}

.big {
  grid-column: 1/-1;
  grid-row: 4/7;
  grid-template-rows: auto 1fr;
}
.big .notes {
  padding: 0.5em;
}
.big h3 {
  padding-top: 0.5em;
}

Styling the Cards

Now, let’s enhance the visual appearance of the cards with CSS. This involves styling the card container, images, titles, and actions to create an appealing user interface. Add borders, shadows, and customize fonts for a polished look.

Conclusion

Congratulations! You have successfully created CSS Cards With Grid Layout. This tutorial provided you with the basic steps, but you can further customize it by adding animations, transitions, or more complex layouts.