Как разместить элемент element в строке и в каждой строке по два под другими

Question

Я пытаюсь написать код HTML, в котором я хочу разместить элемент, как показано на фотографии ниже; значок и под каждым значком слово:

I was able to place element next to each other but I can't put words inside the icon and this is the model which I made.

my code was like this

      Экран  
здоровье   

Бонжур

09-.09.09,0A2.76,2.76,0,0,1,61.89,39a7.48,7.48,0,0,1,4,2.41 c .33.33.66.68,1,1.07с.66.79,1 , 1.23S68.44,44.46,68.73,44.88Z "/>

bonjour

---

и это css часть моего кода и элемента

 svg{
    height:30px;
    width: 30%;
  }
 .gridd{
  display: grid;
  grid-template-areas:

    'menu main main main right right'
    'menu footer footer footer footer footer'

    ;
  grid-gap: 10px;


  padding: 10px;
}

Настоящая проблема заключается в том, как разместить текст внутри значка, как на картинке.

Answer 1

Вы можете применить эту уценку и стили для каждого элемента сетки. Надеюсь, это может быть полезно.

 .gridd{
  display: grid;
  grid-template-areas:

    'left right'

    ;
  grid-gap: 10px;
  padding: 10px;
}

.gridd-item {
  display: flex;flex-direction: column;justify-content: center;align-items: center;
  
}

.gridd-item span {
  margin-top: 10px;
}

.gridd-item svg{
  width: 50px;
  border-radius: 100%;
  height: 50px;
  padding: 20px;
  
  background: rgb(237,209,94);
background: -moz-linear-gradient(0deg, rgba(237,209,94,1) 0%, rgba(196,134,0,1) 100%);
background: -webkit-linear-gradient(0deg, rgba(237,209,94,1) 0%, rgba(196,134,0,1) 100%);
background: linear-gradient(0deg, rgba(237,209,94,1) 0%, rgba(196,134,0,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#edd15e",endColorstr="#c48600",GradientType=1);
  
}
.gridd-item svg path {
  filter: invert(1);
}

.right-part {
  display: flex;
 justify-content: center;
  align-items: center;
}
.right-part .gridd-item {
  margin-right: 20px;
}

<div class="gridd">
<div class="gridd-item" style="grid-area: left;">
<svg class="bi bi-bullseye" class="bi bi-bullseye" width="1em" height="1em"  viewBox="0 0 24 24" style="grid-area: menu;"><path d="M0 0h24v24H0V0z" fill="none" /><path d="M17 1.01L7 1c-1.1 0-1.99.9-1.99 2v18c0 1.1.89 2 1.99 2h10c1.1 0 2-.9 2-2V3c0-1.1-.9-1.99-2-1.99zM17 19H7V5h10v14z"/></svg>
          <span>Ecran</span>
      </div>
   
  
  <div class="right-part" style="grid-area: right;">
  <div class="gridd-item">
<svg class="bi bi-bullseye" class="bi bi-bullseye" width="1em" height="1em"  viewBox="0 0 24 24" style="grid-area: menu;"><path d="M0 0h24v24H0V0z" fill="none" /><path d="M17 1.01L7 1c-1.1 0-1.99.9-1.99 2v18c0 1.1.89 2 1.99 2h10c1.1 0 2-.9 2-2V3c0-1.1-.9-1.99-2-1.99zM17 19H7V5h10v14z"/></svg>
          <span>Ecran</span>
      </div>
  
  <div class="gridd-item">
<svg class="bi bi-bullseye" class="bi bi-bullseye" width="1em" height="1em"  viewBox="0 0 24 24" style="grid-area: menu;"><path d="M0 0h24v24H0V0z" fill="none" /><path d="M17 1.01L7 1c-1.1 0-1.99.9-1.99 2v18c0 1.1.89 2 1.99 2h10c1.1 0 2-.9 2-2V3c0-1.1-.9-1.99-2-1.99zM17 19H7V5h10v14z"/></svg>
          <span>Ecran</span>
      </div>
  
  <div class="gridd-item">
<svg class="bi bi-bullseye" class="bi bi-bullseye" width="1em" height="1em"  viewBox="0 0 24 24" style="grid-area: menu;"><path d="M0 0h24v24H0V0z" fill="none" /><path d="M17 1.01L7 1c-1.1 0-1.99.9-1.99 2v18c0 1.1.89 2 1.99 2h10c1.1 0 2-.9 2-2V3c0-1.1-.9-1.99-2-1.99zM17 19H7V5h10v14z"/></svg>
          <span>Ecran</span>
      </div>
  </div>
   </div>