In line items in CSS Grid 1 row multiple columns

Question

I am trying to learn css grid but i couldnt manage to position items in line responsively inside a div.I mean 1 row,multiple columns.

This is how it looks currently: current

How it suppose to be: suppose to be

HTML:

<div class="subMenu">

    <ul>
         <li>
                  <a href="/products/category/mens-wallets" >
                    <figure><img src="https://bellroy.imgix.net/cms_images/992/MensWallets.png?auto=format&amp;fit=max&amp;h=100"/></figure>
                    <span>Men's wallets</span>
                  </a>
                </li>
                            <li>
                  <a href="/products/category/mens-wallets" >
                    <figure><img src="https://bellroy.imgix.net/cms_images/992/MensWallets.png?auto=format&amp;fit=max&amp;h=100"/></figure>
                    <span>Men's wallets</span>
                  </a>
                </li>
                            <li>
                  <a href="/products/category/mens-wallets" >
                    <figure><img src="https://bellroy.imgix.net/cms_images/992/MensWallets.png?auto=format&amp;fit=max&amp;h=100"/></figure>
                    <span>Men's wallets</span>
                  </a>
                </li>
                            <li>
                  <a href="/products/category/mens-wallets" >
                    <figure><img src="https://bellroy.imgix.net/cms_images/992/MensWallets.png?auto=format&amp;fit=max&amp;h=100"/></figure>
                    <span>Men's wallets</span>
                  </a>
                </li>
                            <li>
                  <a href="/products/category/mens-wallets" >
                    <figure><img src="https://bellroy.imgix.net/cms_images/992/MensWallets.png?auto=format&amp;fit=max&amp;h=100"/></figure>
                    <span>Men's wallets</span>
                  </a>
                </li>
                            <li>
                  <a href="/products/category/mens-wallets" >
                    <figure><img src="https://bellroy.imgix.net/cms_images/992/MensWallets.png?auto=format&amp;fit=max&amp;h=100"/></figure>
                    <span>Men's wallets</span>
                  </a>
                </li>

         </ul>

    </div>

Here is the CSS:

.subMenu{
    display: flex;
    position:relative;
    left: 0;
    width: 100%;
    background: white;
    height: 0;
    overflow: hidden;
    border-top: 1px solid rgb(136, 153, 151);
    opacity: 0;
    z-index: 1;


}
.subMenu ul{
    display: grid;

    justify-content: space-around;
    grid-template-columns: repeat(auto-fit, minmax(65px, 1fr));



}
.subMenu ul li{

    height: %100;
    display:block;
}
.subMenu ul li a {
    position: relative;
    display: block;
    height: 100%;
    text-decoration: none;
    text-align: center;

}
.subMenu ul li a figure{
    transform: translate(0px, -50px);
    height: 100px;


}
.subMenu ul li a figure img{
    border-radius: 50%;
    height: 100%;
}

I guess i couldnt understand how to size grid cells and position items on them.As you see in pictures they are not positioned and centered inside cells.

thanks

Answer 1

You don't even have to use the CSS grid. Flex can handle this on his own.

Just put the display flex on the <ul> and try to keep the code clean:

.subMenu ul{
    padding: 0;
    list-style: none;
    margin: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}
.subMenu ul li a {
    position: relative;
    display: block;
    text-decoration: none;
    text-align: center;

}

<div class="subMenu">

    <ul>
         <li>
                  <a href="/products/category/mens-wallets" >
                    <figure><img src="https://bellroy.imgix.net/cms_images/992/MensWallets.png?auto=format&amp;fit=max&amp;h=100"/></figure>
                    <span>Men's wallets</span>
                  </a>
                </li>
                            <li>
                  <a href="/products/category/mens-wallets" >
                    <figure><img src="https://bellroy.imgix.net/cms_images/992/MensWallets.png?auto=format&amp;fit=max&amp;h=100"/></figure>
                    <span>Men's wallets</span>
                  </a>
                </li>
                            <li>
                  <a href="/products/category/mens-wallets" >
                    <figure><img src="https://bellroy.imgix.net/cms_images/992/MensWallets.png?auto=format&amp;fit=max&amp;h=100"/></figure>
                    <span>Men's wallets</span>
                  </a>
                </li>
                            <li>
                  <a href="/products/category/mens-wallets" >
                    <figure><img src="https://bellroy.imgix.net/cms_images/992/MensWallets.png?auto=format&amp;fit=max&amp;h=100"/></figure>
                    <span>Men's wallets</span>
                  </a>
                </li>
                            <li>
                  <a href="/products/category/mens-wallets" >
                    <figure><img src="https://bellroy.imgix.net/cms_images/992/MensWallets.png?auto=format&amp;fit=max&amp;h=100"/></figure>
                    <span>Men's wallets</span>
                  </a>
                </li>
                            <li>
                  <a href="/products/category/mens-wallets" >
                    <figure><img src="https://bellroy.imgix.net/cms_images/992/MensWallets.png?auto=format&amp;fit=max&amp;h=100"/></figure>
                    <span>Men's wallets</span>
                  </a>
                </li>

         </ul>

    </div>