<ul class="flexbox-grid">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>



<ul class="grid-grid">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>


<ul class="flexbox-grid flexbox-grid-container">
  <li>
    <h2>Item 1</h2>
    <p>Some text</p> 
  </li>
   <li>
    <h2>Item 2</h2>
    <p>Some text</p> 
  </li>
   <li>
    <h2>Item 3</h2>
    <p>Some text</p> 
  </li>
</ul>

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  --font-size: 1.33rem;
   --grid-min: 300px;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p {
  margin: 0;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.65;
  padding: 2rem;
  background-color: #f5f2f7;
  color: #29344B;
  font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, Ubuntu, roboto, noto, segoe ui, arial, sans-serif;
  font-size: clamp(3rem, 5vw + 1rem, 5rem);
}


ul {
  list-style-type: none;
}
li{
  text-align: center;
  padding: 2rem;
}


.flexbox-grid {
  --min: 300px;
  --gap: 1rem;

  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
}

.flexbox-grid > * {
   flex: 1 1 var(--min);
   border: 5px solid #deedee
}





.grid-grid { 
  display :grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--grid-min), 1fr));
  gap:  1rem;
  > * {
     border: 5px dashed #deedee
  }
}


.flexbox-grid-container {
   container-type: inline-size;
  container-name: demo;
   @container demo (min-width: 917px) {
    li {
      display: flex;
  }
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.