0

How can you center items in a 5 column grid? I want to do this without changing the HTML structure. The columns to have the same width but centered. So if the container is set to show 5 columns and some sections have 2 or 3 items the should be centered

See here: 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>
TylerH
  • 20,799
  • 66
  • 75
  • 101
Shae
  • 319
  • 1
  • 4
  • 20
  • What if you introduce divs serving as rows? Then you can center their content, since currently the divs are not separated. – CyberMessiah May 08 '20 at 18:25
  • You mean like adding a div container around
    ?     – Shae May 08 '20 at 18:30
  • Yes, one for the 5 divs with the Heading and the second for the 3, I think that will work but haven't tested it. – CyberMessiah May 08 '20 at 18:32
  • Won't it be too hacky? – Elysian Storm May 08 '20 at 18:46
  • I have these being generated dynamically so not so easy just wrapping some in another div. Was hoping to be able to do it with just additional css. and keep the html structure the same – Shae May 08 '20 at 18:55
  • I am not quite sure if that is attainable unless you do heavy customization on the grid. Use this as reference, you may need to re-write the structure: https://alligator.io/css/align-justify/ – CyberMessiah May 08 '20 at 19:02
  • That is the targeted result but as youll see requires rewriting everything: https://stackoverflow.com/questions/54728957/css-grid-center-align-different-number-of-items-in-2-rows – CyberMessiah May 08 '20 at 19:11

0 Answers0