如何將元素元素放置在行中並在每行中放置兩個在其他行中

Question

我正在嘗試編寫一些 HTML 代碼，我想在其中放置元素的代碼如下圖所示； 一個圖標，每個圖標下都有一個詞：

我 能夠將元素彼此相鄰放置，但我無法在圖標內放置文字，這是我制作的 model。

我的代碼是這樣的

<hr>
    <div class="gridd">

<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 style="grid-area: main;">Ecran</span>
          <br>
          <span style="grid-area:footer;">health</span>
       <span>
 <svg  enable-background="new 0 0 24 24" height="24" viewBox="0 0 24 24" width="24"><g></g><g><g><path d="M21,14c0-0.55-0.45-1-1-1h-2v2h2C20.55,15,21,14.55,21,14z"/><path d="M20,17h-2v2h2c0.55,0,1-0.45,1-1C21,17.45,20.55,17,20,17z"/><path d="M12,14h-2v4h2c0,1.1,0.9,2,2,2h3v-8h-3C12.9,12,12,12.9,12,14z"/><path d="M5,13c0-1.1,0.9-2,2-2h1.5c1.93,0,3.5-1.57,3.5-3.5S10.43,4,8.5,4H5C4.45,4,4,4.45,4,5c0,0.55,0.45,1,1,1h3.5 C9.33,6,10,6.67,10,7.5S9.33,9,8.5,9H7c-2.21,0-4,1.79-4,4c0,2.21,1.79,4,4,4h2v-2H7C5.9,15,5,14.1,5,13z"/><footer>bonjour</footer></g></g></svg>
     <svg  height="24" viewBox="0 0 24 24" width="24"><path d="M7 7.07L8.43 8.5c.91-.91 2.18-1.48 3.57-1.48s2.66.57 3.57 1.48L17 7.07C15.72 5.79 13.95 5 12 5s-3.72.79-5 2.07zM12 1C8.98 1 6.24 2.23 4.25 4.21l1.41 1.41C7.28 4 9.53 3 12 3s4.72 1 6.34 2.62l1.41-1.41C17.76 2.23 15.02 1 12 1zm2.86 9.01L9.14 10C8.51 10 8 10.51 8 11.14v9.71c0 .63.51 1.14 1.14 1.14h5.71c.63 0 1.14-.51 1.14-1.14v-9.71c.01-.63-.5-1.13-1.13-1.13zM15 20H9v-8h6v8z"/></svg>

 <svg  style="position: relative;" data-name="Layer 102" viewBox="0 0 100 125" x="0px" y="0px"><path d="M62.12,4H13.38A5.76,5.76,0,0,0,7.63,9.75v80.5A5.76,5.76,0,0,0,13.38,96H62.12a5.76,5.76,0,0,0,5.75-5.75V84.77L71.7,88.6a3.57,3.57,0,0,0,5.06,0L91.32,74a3.56,3.56,0,0,0,0-5.05l-8.49-8.5A3.59,3.59,0,0,0,78.49,60c-1.45-1.94-5-7-5.64-10.07a15.94,15.94,0,0,0-2.48-6.14,28.41,28.41,0,0,0-2.5-3.15V9.75A5.76,5.76,0,0,0,62.12,4Zm3.75,86.25A3.76,3.76,0,0,1,62.12,94H13.38a3.75,3.75,0,0,1-3.75-3.75V9.75A3.75,3.75,0,0,1,13.38,6H62.12a3.76,3.76,0,0,1,3.75,3.75v29A7.82,7.82,0,0,0,62.13,37a4.91,4.91,0,0,0-2,.16V12.84a2.34,2.34,0,0,0-2.34-2.34H17.66a2.35,2.35,0,0,0-2.35,2.34V78a2.35,2.35,0,0,0,2.35,2.34H57.84A2.34,2.34,0,0,0,60.18,78V75.77l2.13.87a3.55,3.55,0,0,0,.9,3.47l2.66,2.66Zm-27.5-59,9.86,9.86A8.7,8.7,0,0,0,46,42.73a8.47,8.47,0,0,0-1.73,2.38,2.53,2.53,0,0,0-.11,2.35,6.6,6.6,0,0,0-1.74,1.26A5.55,5.55,0,0,0,41,51a2.65,2.65,0,0,0,.22,2.25,5,5,0,0,0-1.46,1,4.07,4.07,0,0,0-1.21,2.32,3.27,3.27,0,0,0,1,2.8l9.54,9.54a29.33,29.33,0,0,0,7.41,5.38l1.63.67v3a.34.34,0,0,1-.34.34H17.66a.35.35,0,0,1-.35-.34V12.84a.35.35,0,0,1,.35-.34H57.84a.34.34,0,0,1,.34.34V37.43L45.63,24.88c-2.18-2.18-4.16-2-5.15-1.76a5,5,0,0,0-3.34,3.63A4.58,4.58,0,0,0,38.37,31.22ZM79,62.08l.17-.17a1.54,1.54,0,0,1,1.11-.46,1.58,1.58,0,0,1,1.12.46l8.49,8.49a1.59,1.59,0,0,1,0,2.23L75.35,87.19a1.61,1.61,0,0,1-2.23,0l-5.25-5.25-1-1-1-1L64.63,78.7a1.57,1.57,0,0,1,0-2.23l1.24-1.24,1-1,1-1ZM68.73,44.88a14.06,14.06,0,0,1,2.16,5.38c.68,3.57,4.63,9.07,6.09,11L67.87,70.4l-1,1-.76.76-.24-.1-3.25-1.33-2.44-1-.07,0c-.32-.16-.62-.35-.93-.52s-.67-.37-1-.57a27,27,0,0,1-4.9-3.89L51.46,62.9l-4-4A1,1,0,0,0,46,60.29l5.84,5.85a29.73,29.73,0,0,0,6.32,4.77c.33.18.66.38,1,.56l.09,0,.91.37,4.39,1.8-1.21,1.22-3.18-1.3-1-.41-1-.41-.79-.33a27.28,27.28,0,0,1-6.84-5L41,58a1.34,1.34,0,0,1-.47-1.14,2.11,2.11,0,0,1,.65-1.16,2.43,2.43,0,0,1,1.49-.77.24.24,0,0,1,.15,0,1,1,0,0,0,1.42,0,1,1,0,0,0,.29-.7,1,1,0,0,0-.29-.71L43,52.26c-.3-.3-.09-.84.15-1.24a4.08,4.08,0,0,1,2.51-2,1,1,0,0,0,1.41,0,1,1,0,0,0,.29-.71,1,1,0,0,0-.29-.71l0,0L46,46.53c-.06-.25.33-1.23,1.48-2.39a4.77,4.77,0,0,1,2.33-1.51,1,1,0,1,0,1.42-1.42h0L39.76,29.79a2.61,2.61,0,0,1-.67-2.56A3,3,0,0,1,41,25c1-.28,2.1.16,3.2,1.25l14,14,1,1,1,1,2.2,2.19A1,1,0,1,0,63.79,43l-3.61-3.61-.09-.09.09,0A2.76,2.76,0,0,1,61.89,39a7.48,7.48,0,0,1,4,2.41c.33.33.66.68,1,1.07s.66.79,1,1.23S68.44,44.46,68.73,44.88Z"/>
         </svg><br><p>bonjour</p>
    </div>
    <hr>

這是我的代碼和元素的 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

您可以為每個網格項應用此 markdown 和 styles。 我希望這會有所幫助。

 .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>