CSS Cards With Grid Layout

CSS Cards With Grid Layout
Code Snippet:Subgrids and Card layouts
Author: Amit
Published: March 23, 2024
Last Updated: March 23, 2024
Downloads: 186
License: MIT
Edit Code online: View on CodePen
Read More

This code creates CSS cards with a grid layout. It displays images, titles, and actions. The grid layout adjusts to different screen sizes. It helps in arranging content neatly in a responsive grid format.

You can use this code on websites to showcase products or articles. It enhances visual appeal with organized card layouts. It ensures content looks good on various devices, improving user experience.

How to Create CSS Cards With Grid Layout

1. Begin by setting up the HTML structure. Inside the <body> tag, create a <div> element with a class of “cards” to contain your cards. Each card will be represented by a <div> with a class of “card”. Include elements such as <img>, <h3>, and <div> for actions within each card.

Replace the placeholder content (e.g., image URLs, titles, prices) with your own content. Update the <img> tag with the URLs of your images, <h3> tags with your titles, and adjust prices accordingly.

<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>

2. Copy the following CSS code into your stylesheet or <style> tags within your HTML document. This CSS code defines the styling for the cards, including grid layout, card appearance, and responsive design

@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;
}

Preview your webpage in a browser to see how the cards appear. Make adjustments to the HTML or CSS as needed to achieve your desired layout and styling. Test the responsiveness by resizing the browser window or viewing on different devices.

That’s all! hopefully, you have successfully created CSS cards on your website. If you have any questions or suggestions, feel free to comment below.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X