我有這個HTML，在左邊顯示圖標，在右邊顯示摘要。我使用引導類col-sm-3 col-md-3包裝圖標和摘要。我這樣做是因為我想每行只顯示4個圖標。如果有四個以上的圖標，那么圖標需要移動到下一行。我將摘要放在col-sm-3 col-md-3類中，因為我希望文本放在圖標旁邊。

然而，我不再想使用bootstrap，所以我正在尋找僅用CSS就能實現我想要的東西的方法。

以下是HTML:

<div class="coreStuff"> 
    <div class="col-sm-3 col-md-3">
        <i class="fa-solid fa-globe"></i>
        <i class="fa-solid fa-globe"></i>
        <i class="fa-solid fa-globe"></i>
        <i class="fa-solid fa-globe"></i>
        <i class="fa-solid fa-globe"></i>
        <i class="fa-solid fa-globe"></i>
        <i class="fa-solid fa-globe"></i>
        <i class="fa-solid fa-globe"></i>
        <i class="fa-solid fa-globe"></i>
    </div>  
    <div class="col-sm-3 col-md-3">
        <p>Global warming can result in many serious alterations to the environment, eventually impacting human health. It can also cause a rise in sea level, leading to the loss of coastal land, a change in precipitation patterns, increased risks of droughts and floods, and threats to biodiversity.</p>
    </div>
</div>

我想我得到了CSS網格的部分工作，但假設只有一個圖標，或兩個圖標，在這種情況下，這個CSS不會工作，因為它在圖標和摘要之間創建了一個很大的差距。有沒有一種方法可以使摘要響應并根據圖標動態調整？

CSS:

.theIcons{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.theSummary{
    width: 25%;
}

希望這有所幫助。

<div class="coreStuff"> 
    <div class="icons">
        <i class="fa-solid fa-globe">1</i>
        <i class="fa-solid fa-globe">2</i>
        <i class="fa-solid fa-globe">3</i>
        <i class="fa-solid fa-globe">4</i>
        <i class="fa-solid fa-globe">5</i>
        <i class="fa-solid fa-globe">6</i>
        <i class="fa-solid fa-globe">7</i>
        <i class="fa-solid fa-globe">8</i>
        <i class="fa-solid fa-globe">9</i>
    </div>  
    <div class="summary">
        <p>Global warming can result in many serious alterations to the environment, eventually impacting human health. It can also cause a rise in sea level, leading to the loss of coastal land, a change in precipitation patterns, increased risks of droughts and floods, and threats to biodiversity.</p>
    </div>
</div

CSS: (邊框只是為了提供視覺反饋，你可以根據自己的需要來設計風格。此外，您可能需要根據自己的設計和布局來調整解決方案)

.icons, .summary{
  border: 1px solid red;
}

.coreStuff { 
  display: flex;
/*  you'll probably want to give some fix width  */
  width: 30em;
}

.icons i {
  border: 1px solid red;
/*   height: 30px; */
/*   width: 30px; */
}

.icons{
  display: grid;
  grid-template-columns : repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  flex-basis: 30%;
/*   gap: 0.5em; */
}
.summary{
  flex-basis: 70%;
}

你的意思是每個摘要都有一個圖標嗎？如果這是真的，你必須把你的HTML變成這樣

<div class="coreStuff"> 
<div class="box">
<i class="fa-solid fa-globe"></i>
<p>your summary </p>
</div>

你的css可能是這樣的:

.coreStuff{
display:flex;
flex-wrap: wrap;
gap:1%
}
.box{
width:24%
display:flex;
gap : 10px ;
}