<p class="remove-text">Hover me to remove texts</p>

<div class="parent center">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

/* The magic */
/* Mixin for defining a grid with max columns */
@mixin max-cols($max-cols, $cols-min-width, $grid-row-gap: 0px, $grid-column-gap: 0px) {
  --max-cols: #{$max-cols};
  --cols-min-width: #{$cols-min-width};
  --grid-row-gap: #{$grid-row-gap};
  --grid-column-gap: #{$grid-column-gap};
  
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(max((100%/(var(--max-cols) + 1) - var(--grid-column-gap)*var(--max-cols)/(var(--max-cols) + 1) + 1px), var(--cols-min-width)), 100%), 1fr));
  gap: var(--grid-row-gap) var(--grid-column-gap);
}

.parent {
  /* Set styles to see the parent */
  margin-top: 1rem;
  padding: 1rem 0;border: 5px solid dodgerblue;
  background: wheat;
  overflow: hidden;
  
  /* Grid system */
  @include max-cols(3, 10rem, 30px, 20px);
}

.child {
  min-height: 3.125rem;
  padding: .3125rem .625rem;
  border: 2px solid brown;
  overflow: hidden;
  &::before {
    content: "Lorem ipsum dolor sit amet consectetur adipisicing elit.";
  }
}

/* Styles not related to the goal */
html {
	box-sizing: border-box;
}
*, 
*:before, *:after {
	box-sizing: inherit;
}

body {
  margin-top: 0;
  text-align: center;
}

.remove-text {
  position: sticky;
  top: 0;
  margin: auto;
  width: fit-content;
  padding: .5rem 1rem;
  font-size: 1.25em;
  color: white;
  background: darkblue;
  border-top: none;
  border-radius: 0 0 5px 5px;
  cursor: default;
}

.remove-text:hover ~ .parent .child::before {
  content: "";
}