.flexgrid {
  display: grid;
  padding: 0;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-template-rows: repeat(auto-fit, 1fr);
  column-gap: 1vw;
  row-gap: 1vh;
  container-type: size;
  block-size: min-content;
  min-height: 50px; }
  ul.flexgrid {
    list-style-type: none; }
  .flexgrid > * {
    display: flex;
    flex-direction: column;
    margin: 0;
    max-width: 100cqw; }

.marker-red {
  border: 1px solid #f00; }

.marker-green {
  border: 1px solid #0f0; }

.horz50 {
  width: 50%; }

  <h1>Headline</h1>
  <p>Paragraph-Test.</p>
  <div class="marker-red horz50">
    <ul class="flexgrid">
      <li class="marker-green">testtext 1</li>
      <li>testtext 2</li>
      <li class="marker-green">testtext 3</li>
      <li>testtext 4</li>
      <li class="marker-green">testtext 5</li>
      <li>testtext 6</li>
      <li class="marker-green">testtext 5</li>
    </ul>
  </div>
  <div class="marker-red">
    <ul class="flexgrid">
      <li class="marker-green">testtext 1</li>
      <li>testtext 2</li>
      <li class="marker-green">testtext 3</li>
      <li>testtext 4</li>
      <li class="marker-green">testtext 5</li>
      <li>testtext 6</li>
      <li class="marker-green">testtext 5</li>
    </ul>
  </div>