Как удалить имена, созданные с помощью "layoutit"

Question

Мне было рекомендовано использовать LayoutIt для создания шаблона сетки для моего сайта.

Однако в созданных мной сетках есть буквы, которые я хотел бы удалить, но я Я не уверен, что я должен редактировать.

Я сделал быстрый пример здесь - https://codepen.io/awersss/pen/KKpjgzZ?editable=true

html,
body,
.grid-container {
  height: 100%;
  margin: 0;
}

.grid-container * {
  border: 1px solid red;
  position: relative;
}

.grid-container *:after {
  content: attr(class);
  position: absolute;
  top: 0;
  left: 0;
}

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 1px 1px;
  grid-template-areas: "l n n n" "l p p p" "l p p p";
}

.n {
  grid-area: n;
}

.l {
  grid-area: l;
}

.p {
  grid-area: p;
}

<div class="grid-container">
  <div class="n"></div>
  <div class="l"></div>
  <div class="p"></div>
</div>

Answer 1

Просто удалите эту строку

content:attr(class);

из правила CSS для .grid-container *:after

Это приводит к отображению имен классов в качестве содержимого этих элементов.

ДОПОЛНЕНИЕ:

На самом деле вы можете даже удалить все правило .grid-container *:after CSS, если оно вам больше не нужно. Единственное, что он делает, это добавляет эти буквы ...