html - 如何在 5 列网格中居中 3 个项目

Question

如何在 5 列网格中居中项目？我想在不改变 HTML 结构的情况下做到这一点。具有相同宽度但居中的列。因此，如果容器设置为显示 5 列并且某些部分有 2 或 3 个项目，则应居中

见这里：https ://codepen.io/shae-strachan/pen/wvKmjPB

<div class="fd-col fd-5col">
  <div class="fd-menu-item sub">
    <div class="fd-item-title"><span>1. CHOOSE YOUR PROTEIN</span></div>
    <div class="fd-dietary"></div>
  </div>
  <div class="fd-menu-item">
    <div class="fd-item-title"><span>Dark Chicken</span></div>

  </div>
  <div class="fd-menu-item">
    <div class="fd-item-title"><span>White Chicken</span></div>

  </div>
  <div class="fd-menu-item">
    <div class="fd-item-title"><span>Sirloin Steak</span></div>

  </div>
  <div class="fd-menu-item">
    <div class="fd-item-title"><span>Salmon</span></div>

  </div>
  <div class="fd-menu-item">
    <div class="fd-item-title"><span>Organic Tofu</span></div>
    </div>
  </div>
    <div class="fd-menu-item sub">
      <div class="fd-item-title"><span>1. CHOOSE YOUR CARB</span></div>
      <div class="fd-dietary"></div>
    </div>
    <div class="fd-menu-item">
      <div class="fd-item-title"><span>Dark Chicken</span></div>

    </div>
    <div class="fd-menu-item">
      <div class="fd-item-title"><span>White Chicken</span></div>

    </div>
    <div class="fd-menu-item">
      <div class="fd-item-title"><span>Sirloin Steak</span></div>

    </div>
  </div>

标签： htmlcsscss-grid