<div class="container">
  <ul class="grid">
    <li class="grid-item">
      <article>
        <h2>this is the title</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos, nisi!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!</p>
      </article>
    </li>
    <li class="grid-item">
      <article>
        <h2>this is the title</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos, nisi!</p>
      </article>
    </li>
    <li class="grid-item">
      <article>
        <h2>this is the title</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos, nisi!</p>
      </article>
    </li>  
  </ul>

  <ul class="grid equal">
    <li class="grid-item">
      <article>
        <h2>this is the title</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos, nisi!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!</p>
      </article>
    </li>
    <li class="grid-item">
      <article>
        <h2>this is the title</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos, nisi!</p>
      </article>
    </li>
    <li class="grid-item">
      <article>
        <h2>this is the title</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos, nisi!</p>
      </article>
    </li>  
  </ul>  
</div>
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;  
}

.grid.equal {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
}






/*
    👇 just to make this demo beautiful for you
*/

* {
  box-sizing: border-box;
}

body {  
  min-height: 100vh;
  padding: 2rem;  
  background-size: cover;
  font-family: 'Flow Circular', cursive;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' viewBox='0 0 700 700' width='700' height='700'%3E%3Cdefs%3E%3ClinearGradient gradientTransform='rotate(230, 0.5, 0.5)' x1='50%25' y1='0%25' x2='50%25' y2='100%25' id='ffflux-gradient'%3E%3Cstop stop-color='%23FD6C13' stop-opacity='1' offset='0%25'%3E%3C/stop%3E%3Cstop stop-color='%23E63E00' stop-opacity='1' offset='100%25'%3E%3C/stop%3E%3C/linearGradient%3E%3Cfilter id='ffflux-filter' x='-20%25' y='-20%25' width='140%25' height='140%25' filterUnits='objectBoundingBox' primitiveUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.001 0.001' numOctaves='2' seed='221' stitchTiles='stitch' x='0%25' y='0%25' width='100%25' height='100%25' result='turbulence'%3E%3C/feTurbulence%3E%3CfeGaussianBlur stdDeviation='0 0' x='0%25' y='0%25' width='100%25' height='100%25' in='turbulence' edgeMode='duplicate' result='blur'%3E%3C/feGaussianBlur%3E%3CfeBlend mode='color-dodge' x='0%25' y='0%25' width='100%25' height='100%25' in='SourceGraphic' in2='blur' result='blend'%3E%3C/feBlend%3E%3C/filter%3E%3C/defs%3E%3Crect width='700' height='700' fill='url(%23ffflux-gradient)' filter='url(%23ffflux-filter)'%3E%3C/rect%3E%3C/svg%3E");  
}

.container {
  max-width: 70rem;
  margin: auto;
}

ul {
  padding: 0;
  margin: 0 0 2rem;
  list-style-type: none;
}

article {
  --gray: #ccc;
  padding: 1rem;
  background-color: #fff;
  border-radius: 10px;
  color: var(--gray);
  box-shadow:
    0.3px 0.5px 0.7px hsl(23deg 93% 31% / 0.36),
    0.8px 1.6px 2px -0.8px hsl(23deg 93% 31% / 0.36),
    2.1px 4.1px 5.2px -1.7px hsl(23deg 93% 31% / 0.36),
    5px 10px 12.6px -2.5px hsl(23deg 93% 31% / 0.36);    
}

h2, p {
  padding: 0 10px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.