难以显示 3 列结构

Question

我目前正在尝试将卡片显示为 3 列结构（第一行有 3 张卡片，然后在下一行换成 3 张卡片......）另外，我不确定为什么我的 ul 不是取其父级的整个宽度。目前，我正在尝试使用网格系统。

.roll-card-body{
    width: 80%;
    margin: 0 auto;
    margin-top: 2%;
}

.roll-card-body a{
    width: 100%;
}

.roll-card-body ul{
    width: inherit;
}


.roll-card-body .card{
    background: #FFF2D7;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows:auto;
    grid-gap: 1rem;
}

<div class='roll-card-body'>
    <ul>
        <a class='card' href="">
            <li>
                <img src="images/original.png" alt="">
                <h4>Original Roll</h4>
                <p>$3/roll</p>
            </li>
        </a>

        <a class='card' href="">
            <li>
                <img src="images/strawberry.png" alt="">
                <h4>Original Roll</h4>
                <p>$3/roll</p>
            </li>
        </a>

        <a class='card' href="">
            <li>
                <img src="images/strawberry.png" alt="">
                <h4>Original Roll</h4>
                <p>$3/roll</p>
            </li>
        </a>

        <a class='card' href="">
            <li>
                <img src="images/strawberry.png" alt="">
                <h4>Original Roll</h4>
                <p>$3/roll</p>
            </li>
        </a>

    </ul>
</div>

Answer 1

您的.roll-card-body 元素宽度设置为 80%。您的 ul 元素的宽度设置为继承。 .roll-card-body 是ul 的父元素，所以ul 也将具有其容器的80% 的宽度，即它将从其父元素继承其宽度。从ul 中删除width: inherit;，它的宽度将与.roll-card-body. 相同

至于你的网格。它不起作用，因为您在错误的位置指定了display: grid。目前它在.card 类中，这是子元素的类。它应该只在.roll-card-body 类中，这样它将应用于所有子元素。

尝试做这样的事情：

HTML：

<div class="roll-card-body">
    <div class="card">
        <img src="images/original.png" alt="">
        <h4>Original Roll</h4>
        <p>$3/roll</p>
    </div>
    <div class="card">
        <img src="images/original.png" alt="">
        <h4>Original Roll</h4>
        <p>$3/roll</p>
    </div>
    <div class="card">
        <img src="images/original.png" alt="">
        <h4>Original Roll</h4>
        <p>$3/roll</p>
    </div>
    <div class="card">
        <img src="images/original.png" alt="">
        <h4>Original Roll</h4>
        <p>$3/roll</p>
    </div>
</div>  

CSS：

.roll-card-body{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-gap: 1rem;
}

这将为您提供创建功能性 CSS 网格的良好起点。

Answer 2

你没有正确使用 ul 元素，拥有它 width: inherit 的 ang 将从其父元素继承 80% 的宽度。

所以我删除了 ul 元素，并将 li 设置为 list-style-type: none; 以删除项目符号形式。

.roll-card-body{
    width: 80%;
    margin: 0 auto;
    margin-top: 2%;
}

li {
  list-style-type: none;
}

.roll-card-body .card{
    background: #FFF2D7;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows:auto;
    grid-gap: 1rem;
}

<div class='roll-card-body'>

        <a class='card' href="">
            <li>
                <img src="images/original.png" alt="Image here">
                <h4>Original Roll</h4>
                <p>$3/roll</p>
            </li>
        </a>

        <a class='card' href="">
            <li><h4>Original Roll</h4>
                <img src="images/strawberry.png" alt="Image here">
                
                <p>$3/roll</p>
            </li>
        </a>

        <a class='card' href="">
            <li>
                <img src="images/strawberry.png" alt="Image here">
                <h4>Original Roll</h4>
                <p>$3/roll</p>
            </li>
        </a>

        <a class='card' href="">
            <li>
                <img src="images/strawberry.png" alt="Image here">
                <h4>Original Roll</h4>
                <p>$3/roll</p>
            </li>
        </a>

</div>

Answer 3

您可以使用display: flex 轻松完成。它更简单，更容易。

之前

ul {
}

li{
}

.roll-card-body .card{
    background: #FFF2D7;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows:auto;
    grid-gap: 1rem;
}

之后

ul {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

li {
  margin-left: auto;
  margin-right: auto;
  width: 100px;
}

a {
    background: #FFF2D7;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}