В позициях в CSS Grid 1 ряд из нескольких столбцов

Question

Я пытаюсь выучить CSS-сетку, но мне не удается правильно расположить элементы в строке внутри div. Я имею в виду 1 строку, несколько столбцов.

Вот как это выглядит сейчас: ток

Как это должно быть: предположим, что

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>

Вот 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%;
}

Полагаю, я не мог понять, как определять размеры ячеек сетки и размещать на них элементы. Как вы видите на рисунках, они не расположены и не центрированы внутри ячеек.

спасибо

Answer 1

Вам даже не нужно использовать сетку CSS. Флекс может справиться с этим самостоятельно.

Просто установите гибкий дисплей на <ul> и попытайтесь сохранить код чистым:

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