CSS Card With 2 Columns and Scrollable Content

This code creates a CSS card with 2 columns and scrollable content. It styles HTML elements for a modern layout. The CSS code implements a gradient background and responsive design. The HTML structure includes sections for introductory and detailed content, with a scrollable area for lengthy text. The card is helpful for displaying organized information with a sleek design.

How to Create CSS Card With 2 Columns and Scrollable Content

1. First of all, load the Reset CSS by adding the following CDN link into the head tag of your HTML document.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

2. Set up the HTML structure. We’ll create an <article> element with a class of “container” to contain our card. Inside this container, we’ll have two <section> elements: one for the introductory content and another for the detailed content. The detailed content section will include a scrollable area for lengthy text.

<article class="container">
  <section class="intro flow">
    <h2>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</h2>
    <p>Et laborum, inventore provident ipsam ex, dignissimos perspiciatis, suscipit sed ullam sequi repudiandae esse vitae. Pariatur debitis ipsum consectetur. Ut, voluptas necessitatibus.</p>
    <button>Learn more</button>
  </section>
  <section class="details">
    <header>Header</header>
    <div class="scroll-container">
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Veniam cupiditate explicabo autem voluptatem natus fuga, iste, dicta consectetur qui commodi nemo, quisquam minima doloremque aliquam reiciendis at dolorum eius esse. Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui excepturi accusantium, voluptatem dolorem maiores possimus deleniti rerum adipisci iusto nobis consequatur reiciendis. Alias ipsa modi, ducimus esse molestiae nihil facilis? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorum natus libero amet? Alias autem ab commodi iusto enim. Unde eum asperiores nobis odio voluptate, enim culpa sit! Reprehenderit, soluta? Provident. Lorem ipsum dolor sit amet consectetur, adipisicing elit. A ducimus sunt consectetur quis ratione sapiente suscipit ullam aliquam inventore. Delectus eligendi numquam nisi at rem quia aliquam. Quaerat, magnam nemo! Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque fugit dolorem totam numquam culpa quo quos itaque similique in ratione incidunt recusandae perferendis dolore hic porro enim, obcaecati cumque ipsum. Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias amet atque delectus quia a labore, repellendus nemo inventore cumque fugit ea voluptas voluptates laborum! Praesentium, culpa qui! Ratione, maiores reprehenderit.
    </div>
    <footer>Footer</footer>
  </section>
</article>

3. Now, let’s add CSS styling to achieve the desired layout and design for our card.

* {
  box-sizing: border-box;
}


:root {
  color-scheme: light dark;

  --h: 330;
  --s: 88%;
  --l: 66%;
  --brand-color-bg: hsl(var(--h) var(--s) var(--l));
  --brand-color-fg: hsl(0 0% 99%);
  --border: 1px solid var(--brand-color-bg);
  --shadow-blur: 1.5rem;
  --shadow-color: hsla(var(--h) var(--s) var(--l) / 0.6);
  --shadow-y: 1rem;
  ---shadow-y: calc(var(--shadow-y) * -1);
  --space: clamp(1.125rem, 0.8rem + 1.3cqi, 1.875rem);
  --gradient: linear-gradient(
    165deg,
    transparent 50%,
    hsla(var(--h) var(--s) var(--l) / 0.15) 125%
  );
}

@media (prefers-color-scheme: dark) {
  :root {
    --l: 46%;
  }
}

html {
  height: 100%;
}

body {
  display: grid;
  place-items: center;
  font-family: system-ui, sans-serif;
  font-size: clamp(1rem, 0.6rem + 1.125cqi, 1.125rem);
  line-height: 1.5;
  padding: 2rem;
  min-height: 100%;
}

h2 {
  font-size: 2em;
  font-weight: 700;
  line-height: 1.1;
  text-wrap: balance;
}

button {
  font: inherit;
  line-height: normal;
  padding: 0.5rem 1.5rem 0.6rem;
  background: var(--brand-color-bg);
  color: var(--brand-color-fg);
  border: unset;
  border-radius: 0.25rem;
}

button:active {
  translate: 0 1px;
}

.flow > * + * {
  -webkit-margin-before: var(--space);
          margin-block-start: var(--space);
}

.container {
  background: #fff;
  display: grid;
  grid-auto-rows: 1fr;
  border: var(--border);
  border-radius: 1rem;
  inline-size: min(55rem, 100%);
}

.intro {
  padding: var(--space);
  background-image: var(--gradient);
}

.details {
  display: grid;
  grid-template-rows: auto 1fr auto;
  -webkit-border-before: var(--border);
          border-block-start: var(--border);
}

.details :where(header, footer) {
  padding: calc(var(--space) / 2) var(--space);
  text-align: center;
  font-size: 0.8em;
  font-weight: 500;
  text-transform: uppercase;
  background-image: var(--gradient);
}

.scroll-container {
  contain: size;
  overflow-y: auto;
  -ms-scroll-chaining: none;
      overscroll-behavior: contain;
  scrollbar-color: var(--brand-color-bg) transparent;
  padding: var(--space);
  border-block: var(--border);
  -webkit-animation: scroll-shadow-inset linear;
          animation: scroll-shadow-inset linear;
  animation-timeline: scroll(self);
}

@-webkit-keyframes scroll-shadow-inset {
  from {
    box-shadow: inset 0 var(---shadow-y) var(--shadow-blur) var(---shadow-y)
      var(--shadow-color);
  }

  to {
    box-shadow: inset 0 var(--shadow-y) var(--shadow-blur) var(---shadow-y)
      var(--shadow-color);
  }
}

@keyframes scroll-shadow-inset {
  from {
    box-shadow: inset 0 var(---shadow-y) var(--shadow-blur) var(---shadow-y)
      var(--shadow-color);
  }

  to {
    box-shadow: inset 0 var(--shadow-y) var(--shadow-blur) var(---shadow-y)
      var(--shadow-color);
  }
}

@media (min-width: 40rem) {
  .container {
    grid-template-columns: 1fr 1fr;
  }

  .details {
    -webkit-border-before: unset;
            border-block-start: unset;
    -webkit-border-start: var(--border);
            border-inline-start: var(--border);
  }
}

Finally, you can add your content within the <section> elements. The introductory section can include headings, text, and buttons, while the detailed section can contain more extensive content that requires scrolling.

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

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.